Text not visible when browser zoomed in

Support
#1

Text is not displaying on browsers where it is zoomed in too close - can only be seen if the zoom is reduced. Anyone have a work around for this?

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Sorry about that!

Check out: http://aboutfbc.org/foreman-cg/

When you zoom in the title on the top right (that name) gets cut off.

However, on IE it seems that the default zoom level (100%?) has it cut off - so users in IE are not seeing all the content.

#4

Hi,

Your navbar is too long to fit the allowed space on certain window width, resulting to your navbar moving down and covering part of your content.

We can make the mobile button appear earlier by adding the code below in X > Launch > Options > CSS

@media (max-width: 1395px) {
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

.x-nav-wrap.desktop {
    display: none;
}

.x-nav-wrap.mobile {
    display: block;
}

.x-nav-wrap.mobile.collapse {
    display: none;
}

.x-nav-wrap.mobile.collapse.in {
    display: block !important;
}
}

Hope that helps.

#5

Thank you for your help! So showing the mobile button is the only way to overcome that? Not sure how that looks on a desktop. The other option is to reduce top menu size or menu items?

#6

Hi There,

Yes, that is also possible. This particular situation is simply a matter of reworking your menu content to properly fit all on the navbar. I think your main issue there is your menu’s font-size its too big and the letter-spacing are too far. Please adjust/decrease both of this on Appearance > Customize > Header, look for Navbar Font Size and Navbar Letter Spacing option.

Hope it helps,
Cheers!

1 Like