[Support request] Achieving a custom layout

Home Forums Support Achieving a custom layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1491766
    Hasan

    I want to achieve a custom layout like bellow:

    1440px Breakpoint:
    Container: 1400px
    Content 768px / 20px gap / Sidebar-1 1fr / 20px gap / Sidebar-2 1fr

    1280px Breakpoint:
    Container: 1240px
    Content 768px / 20px gap / Sidebar-1, bellow Sidebar-2 1fr

    768px Breakpoint:
    Container: 768px
    Content: 768px
    Sidebar-1 1fr / 20px / Sidebar-2 1fr

    Mobile View:
    Content 1fr
    Sidebar-1 1fr
    Sidebar-2 1fr

    Basically I want to keep the content for desktop & tablet view 768px. Then for the widest view, 2 sidebars side by side (not less than 300px each). If not enough space, there will be one sidebar and another one will come bellow that.

    I am trying to rebuild an existing side where all the photos are 768 px, so I want to keep that size for the content. Please help in achieving this layout. Feel free to suggest anything better keeping the content size of 768px in mind. Thanks!

    #1491890
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so i can work out the CSS.

    #1491903
    Hasan

    Hi David,

    I am working on a localhost, so can’t share the actual environment unfortunately. But here is the site I am trying to rebuild: https://nijhoom.com/panam-nagar/

    It currently has one sidebar, but the layout I am thinking with two sidebars is different.

    Thanks!

    #1492277
    David
    Staff
    Customer Support

    Try this CSS:

    @media(min-width: 600px) and (max-width: 1407px) {
        .site-content>div {
            width: 100% !important;
        }
    
        .site-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
    
        #primary {
            grid-column: 1 / -1;
            ;
        }
    
        #left-sidebar .inside-left-sidebar {
            margin-top: 0;
            margin-right: 10px;
        }
    
        #right-sidebar .inside-right-sidebar {
            margin-top: 0;
            margin-left: 10px;
        }
    }
    
    @media(min-width: 1028px) and (max-width: 1408px) {
        .site-content {
            grid-template-columns: 768px 1fr;
            grid-template-rows: auto auto;
        }
    
        #primary {
            grid-column: 1;
            grid-row: 1 / -1;
        }
    
        #right-sidebar {
            grid-column: 2;
            grid-row: 2;
            margin-left: 0;
        }
    
        #left-sidebar .inside-left-sidebar {
            margin-top: 20px;
        }
    
        #right-sidebar .inside-right-sidebar {
            margin-top: 0;
            margin-left: 0;
        }
    }
    
    @media(min-width: 1408px) {
        #primary {
            width: 768px;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.