[Support request] Tablet View Problem

[Sonja]

Hello,

on this site, the tablett view looks not nice, because the main nav breaks, so that the search icon is on antoher row.
How can I fix this?

I had a code from this forum for antoher side, but this does not work here:

/* Tablet View Menu in mitte */
@media (min-width: 769px) and (max-width: 1024px) {
        nav.main-navigation .inside-navigation.grid-container {
        justify-content:center;
    }
    
    nav.main-navigation .inside-navigation.grid-container .navigation-branding {
        margin-right:0;
        margin-left:0;
    }
}

[Fernando]

Hi Sonja,

The Search Icon is wrapping because there isn’t enough space.

One thing you can do is to reduce the size of the site logo on Tablet through this CSS which you may add through Appearance > Customize > Additional CSS:

@media (min-width: 769px) and (max-width: 1024px) {
    .site-logo img {
        height: 80px;
    }
}

Alternatively, in the Typography Manager, you may also try reducing the font size of the Primary Menu Items on Tablet: https://share.getcloudapp.com/p9uO65OK

Hope this clarifies!

[Sonja]

Hi Fernando,

okay, thanks, sounds good. I look at the tablet later.

[Fernando]

You’re welcome Sonja!

[Author]

Posts