Sidebar - remove margin & make responsive

Rebuilding my site. I have the sidebar sticky to the right side, but can't get rid of the gap between it and the edge of browser window. I've been looking at margin, padding, alignment...

I would like to get it flat to the window and make the sidebar responsive that it will hide (preferably) or move to the bottom of screen on mobile devices. Any help with code appreciated. Thanks.

  • Rupok

    Hi Katrina,

    Thanks for asking. I'm sorry but I'm not exactly sure about your requirements. Can you please help me in understanding your queries so we can provide you a better solution?

    You said, "can't get rid of the gap between it and the edge of browser window". Do you want that the sidebar will show being attached to the edge of the browser on right? Because in my current screen (1920x1080px), there is a huge gap between the sidebar and the edge of the browser. Please check the attached screenshot for reference.

    If you still want to do this, I'll be glad to provide you custom CSS code for this.

    I would like to get it flat to the window

    Can you please explain a little bit more about this too?

    make the sidebar responsive that it will hide (preferably)

    I checked your site in responsive view and the sidebar is not showing in mobile. Am I missing anything? Please check the attached screenshot for reference.

    Please send us all these details. I'm looking forward to hearing from you and resolving these issues as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Katrina,

    If I understood your query right, then you are trying to remove those extra space on both sides, right?

    If yes, then can you please try the following custom CSS code?

    .upfront-grid-layout {
        width: 100%;
    }

    Use this custom CSS code in the Global Theme CSS section inside the Builder. Please check the attached screenshot for reference.

    The output will be like this:

    Please let us know if this is not what you are looking for. We will be glad to assist further.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Katrina,

    As you are overriding the default container width of Upfront with the given custom CSS code, it's not showing inside the editor, but will work fine in front-end.

    The 100% width will override the fixed container width. So anything inside the Upfront container div will inherit this width. If I give you code to make only the sidebar with the edge of the browser, then still you will get huge wide blank space on the left side. So IMO, the current approach is the better approach. But if you want, we can work further to float the sidebar only to the right edge.

    Please let us know what you think about this. I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok