Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Windows Font settings & Site displaying differently on various screens

  • Rookie mistake?

    After building my site on my desktop (16:9 4k monitors) ,I opened one of my laptops (same ratio & res) to double check things and noticed that my site was too big. I reduced the main container from 1345 to 1200px and it looked good except the primary nav was centered rather than justified left, even with the other containers. I then checked my video/photo editing laptop (16:10 3.2k screen) and it was too big even at 1200px.

    THEN, I noticed that I have Window’s Font Size set at 135% on my desktop monitors (where I built the site). It didn’t cross my mind that the customizer desktop view would be affected as such, When I changed the Window’s font size to 100%… yikes!

    Needless to say, I need to sort out how to make my site scale correctly across all devices. Any idea where I should begin?

  • Hi Trey,

    Sorry, I don’t quite get your point.

    The site should be responsive automatically unless you have custom CSS that is affecting it.

    So what is the main issue?

  • That is likely the case but have no idea where.

    Regardless, I added a screenshot in the private area of how the menus appear on my actual mobile, desktop, and laptop screens. Thoughts?

    – Trey

  • I don’t see big issues here, the menu functions well, can you tell me how you want it to be?

  • If you look at the screenshots, the menu on the laptop is squashed compared to the desktop (see the difference in spacing and the location of the pointers). On the mobile menu, I would prefer the pointers to the side be closer to the menu items… but not a deal breaker if adjusting them throws the other views off.

    – Trey

  • that’s a much better description of the issue 🙂

    So do you want the dropdown icon to be next to the menu item text on all devices?

  • That is my goal, LOL!

  • Try this:

    .main-navigation.toggled .main-nav > ul a {
        display: flex;
    }
  • That seems to have fixed it as well as the drop-down speed (from my other topic), but two things…

    The arrows shift left one way on desktop and the other way on mobile when collapsing the menu

    Lastly, the hamburger is justified near the left on the desktop but is about 30% to the right in laptop view. I notice it shifts when I open & close the customizing menu side bar.

    *I am in process of putting the header at the top of mobile view since it needs to be showcased, but I don’t think it will affect anything.

    – Trey

  • The arrows shift left one way on desktop and the other way on mobile when collapsing the menu

    Yes, it’s because of this CSS, there’s a 10px padding-left by default, you’ve set it to 0 using below CSS.

    @media (min-width: 769px) {
        .main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
            margin-right: 900px;
            padding-left: 0px;
        }
    }

    Removing the margin-right: 900px; and changing the padding from 0px to 10px should fix the issue.

    Lastly, the hamburger is justified near the left on the desktop but is about 30% to the right in laptop view. I notice it shifts when I open & close the customizing menu side bar.

    You are using static spacing/sizing settings to position the navigation, which is not a good idea, as a website is dynamic, the layout should be responsive on all screen sizes. If you use static spacing, it will cause layout issues in terms of responsiveness.

    I recommend examining all your custom CSS and block settings, if there’s any static width or height value, you need to double check that value, or let me know, I can help adapt them to a more responsive CSS.

    For example, this CSS is obviously not a good practice with a large value of static margin-left, set it to auto instead should center the navigation on all screens.

    @media (min-width: 769px) {
        .main-navigation {
            width: 57%;
            margin-left: 340px;
            margin-top: 20px;
            margin-bottom: 0px;
        }
    }
  • We’re getting closer!

    The arrow shift is good on desktop but still shifts on mobile.

    I set the margin crazy like that because I obviously don’t know what I am doing. The goal was to get the hamburger to align left, even with the header & other items. How can I set it so that it justifies left on all devices?

    Also, I am running into a spacing issue with the header on tablet… which is probably due to the same poor choice in me setting static margins etc.

    – Trey

  • Here’s one I can’t sort out. Changing the margin-left: to auto, shifts the header to the left.

    @media (max-width: 768px) {
    .gb-container-eef77f0e {
    width: 590px;
    height: auto;
    margin-left: 210px;
    display: flex !important;
    flex-wrap: wrap;
    }}

  • The goal was to get the hamburger to align left

    Then set the margin-left to 0.

  • To eliminate some confusion, this is in desktop… There isn’t a ‘@media (min-width: 769px) {‘ in this set.

    The below moves the hamburger to the extreme left.

    .main-navigation {
    width: auto;
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 0px;

    }

  • When you say align left does not mean actually align to the left?

    I’m confused….just slightly left?

  • Ahh, I can see where there is some confusion.

    I want the hamburger to always align with the left edge of all content… which is set at 1200px wide. Visually, I want the hamburger to be lined up with the blue lines of the header and the blog content below it… not against the edge of the device screen.

Viewing 16 posts - 1 through 16 (of 19 total)
  • You must be logged in to reply to this topic.