As you can see in the below images, the (yellow, red & white) buttons in the nav-bar look nice & tidy, but as I make the screen smaller, they get cramped.
Here, the (blue) drop-down menu overflows when I make the screen smaller.
Instead of the text spanning to the next line, is it possible to make the button and drop-down smaller as the screen size becomes smaller? So that they look visually presentable.
Use vw’s for the text size and see if you can make it look good. I’d rather not - the text is too small as it is, it will look blurry on some devices. You can also simply change text size on different breakpoints
I think that’s just the way dropdowns are. You can either cut it when it reaches some width (won’t look good) or create a custom dropdown (from a button for example).
Exactly. You can use those that already there, put icon for visual distinction to the right of the text, style the button, add hidden dropdown list, reveal it on click and hide on second click.
@dram My design looks neat for monitor sizes from 1300 px width and upward. But my client wants the website to be responsive down to the smallest of desktop screens.
There are too many variables - buttons, texts, divs, images, etc. I know I need to use % and VW to make things responsive. But the Min. Width doesn’t always work as expected.
You can add custom breakpoints and style your elements the way you want. And yes, you can make paddings on buttons responsive by using vw’s. It won’t help much though - the text is unnecessary large for the filter section. Either reduce it or increase the filter panel width.