[Resolved] Mobile breakpoint?

Home Forums Support [Resolved] Mobile breakpoint?

Home Forums Support Mobile breakpoint?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1604186
    Jeffrey

    Hey!

    I’ve been trying to fix the mobile breakpoint for my site. Currently, it changes from 2 columns to a single column at 1068 and also the header changes at that breakpoint as well.

    When I go into Customizer > Layout > Primary navigation – it is set to 768, so I am not quite sure what is causing this behavior.

    Thanks for your help!

    #1604284
    Elvin
    Staff
    Customer Support

    When I go into Customizer > Layout > Primary navigation – it is set to 768, so I am not quite sure what is causing this behavior.

    This setting only applies to the primary navigation’s breakpoint. it doesn’t change the breakpoint for the whole site.

    I’ve been trying to fix the mobile breakpoint for my site. Currently, it changes from 2 columns to a single column at 1068 and also the header changes at that breakpoint as well.

    I’m not sure I get what you mean.

    I’ve checked the link provided wasn’t able to find any 2 column section anywhere on it. Can you specify which part are you pertaining to? Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1604293
    Jeffrey

    Hey thanks for responding,

    Sorry for the confusion, I meant that the sidebar collapses so that it only shows content without the sidebar. I want to prevent the sidebar from collapsing until closer to 800-900px.

    #1604390
    Elvin
    Staff
    Customer Support

    Sorry for the confusion, I meant that the sidebar collapses so that it only shows content without the sidebar. I want to prevent the sidebar from collapsing until closer to 800-900px.

    I’m not exactly sure I see what you mean with “2 columns to a single column at 1068px”.

    I’ve checked your site and this is what I see on my end: https://share.getcloudapp.com/BluQqX5w

    As we can see on the video, the sidebar doesn’t “collapse” or move under the content around 1068px. It only collapses when the viewport width is equal or smaller 768px.

    That said, do you want to change this current behavior? Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1604398
    Jeffrey

    Elvin…wow. Thanks for showing me that. You won’t believe it..I was checking the pixels with Chrome Browser’s Inspect tool….WHILE my customizer panel was open, so it must’ve been including that in the pixel count.

    Thanks for all your help…I have one last question if you can help me out. For my header, when it in mobile view (<768) and I scroll down. The sticky navigation is out of whack because of some of the css. The magnify search icon is on the left side (ideally it would stick on the right side) and also the logo itself its skewed upwards compared to where I would want it to be at. Can you help me with this?

    #1604427
    Elvin
    Staff
    Customer Support

    The logo is skewed because of the bottom value placed on this CSS:

    @media (max-width: 768px)
    .navigation-branding, .site-logo {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translatex(-50%);
    }

    Removing or changing the bottom’s value to 0 should fix it.

    As for the search icon:

    Add this CSS:

    #sticky-navigation .menu-bar-items {
        margin-left: auto;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1605380
    Jeffrey

    Thank you for all of your assistance!

    #1605686
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

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