- This topic has 3 replies, 2 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
October 16, 2020 at 4:49 am #1491766Hasan
I want to achieve a custom layout like bellow:
1440px Breakpoint:
Container: 1400px
Content 768px / 20px gap / Sidebar-1 1fr / 20px gap / Sidebar-2 1fr1280px Breakpoint:
Container: 1240px
Content 768px / 20px gap / Sidebar-1, bellow Sidebar-2 1fr768px Breakpoint:
Container: 768px
Content: 768px
Sidebar-1 1fr / 20px / Sidebar-2 1frMobile View:
Content 1fr
Sidebar-1 1fr
Sidebar-2 1frBasically 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!
October 16, 2020 at 6:46 am #1491890DavidStaffCustomer SupportHi there,
can you share a link to your site so i can work out the CSS.
October 16, 2020 at 6:57 am #1491903HasanHi 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!
October 16, 2020 at 9:43 am #1492277DavidStaffCustomer SupportTry 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; } }
-
AuthorPosts
- You must be logged in to reply to this topic.