Responsive breakpoints may have in-between areas

[srumery]

I’ve noticed on a couple sites that the header and menus have in-between breakpoint issues. This happens at around 1180px wide. So, it is not responding well on smaller laptops/bigger tablet hybrids.

Public site: https://withmefit.com/

I’ve uploaded a few screenshots as well…
Site 1:
>1180: http://postimg.org/image/sgbc3k353/
<1180: http://postimg.org/image/wy0n0rv9f/

Site 2:
>1180: http://postimg.org/image/qu49xwtet/
<1180: http://postimg.org/image/6e7s17p71/

What CSS adjustments can we make to fix this?

Topic

[Jason Bobich]

Hi,

This just has to do with how many buttons you have on your menu bar. In designing your site, you’ll need to take this into account. If you want to tackle through CSS customization, you could always make the buttons smaller by changing the font size or padding on them, at whatever custom viewport sizes you want.

@media (min-width: 992px) and (max-width: 1180px) {
	/* Style anything your heart desires from 992px to 1180px */
}

[Author]

Replies