Two Sidebar Layout

  • Resolved dukearmi

    (@dukearmi)


    10 months, 3 weeks ago

    Hello,

    I’m wondering about the best way to handle a sidebar/content/sidebar layout when wanting to maintain 300px. I tested on different devices, like the iPad, and the content area shrinks too much.

    I’m using the following CSS, am I doing something wrong? How to avoid sidebars on tablets that are 1024px or more width?

    @media (min-width: 769px) {
		#left-sidebar {
        width: 320px;
    }
    .inside-left-sidebar { 
	height: 100%;
	padding-right: 10px;
	padding-left: 10px;
    }
    #right-sidebar {
        width: 320px;
    }
    .inside-right-sidebar {
        padding-right: 10px;
        padding-left: 10px;
    }
    body:not(.no-sidebar) #primary {
        width: calc(100% - 640px);
    }
}

    Link to page: https://shorturl.at/zAS05
    Screenshot: https://postimg.cc/4YFJhy40

Viewing 13 replies - 1 through 13 (of 13 total)

  • Hi there,

    what do you want to happen to the sidebars on tablet (1024px) screen widths ? eg. hide them or stack them below the content
    You could show one sidebar or hide the other as another option.

    Let me know

    Thread Starter dukearmi

    (@dukearmi)

    Hi David,

    Thank you for the quick response!

    I’d like to explore both options if it’s not too much trouble. Both seem wonderful!

    Thread Starter dukearmi

    (@dukearmi)

    I’d like to hide the right sidebar and show the left one only.

    I would use this CSS:

    /* CUSTOM SIDENBARS */
:root {
    --sb-width: 320px;
}
.both-sidebars .site-content .sidebar {
    width: var(--sb-width);
}

.inside-left-sidebar, .inside-right-sidebar {
    padding-inline: 10px;
    height: 100%;
}
@media(max-width: 1023px) {
    .both-sidebars .is-right-sidebar {
        display: none;
    }
}
@media(max-width: 1023px) and (min-width: 769px) {
    .both-sidebars .site-content .content-area {
        width: calc(100% - var(--sb-width));
    } 
}
@media(min-width: 1024px) {
    .both-sidebars .site-content .content-area {
        width: calc(100% - ( var(--sb-width) * 2));
    }
}

    This sets the sidebar widths to 320px and includes the padding.
    On screens between below 1024px it removes the right sidebar
    And on screens between that and 769px it adjusts the content width to compensate for the one sidebar

    Thread Starter dukearmi

    (@dukearmi)

    Thank you! It works great, but the content area becomes too narrow on tablet and mobile.

    Screenshot: https://postimg.cc/xkqZXLBy

    I modified the code above to fix the mobile issue.
    For Tablet you would need to consider adjusting the breakpoint.
    Does the sidebar have remain 320px wide or should both sidebars disappear at certain size ?

    Thread Starter dukearmi

    (@dukearmi)

    Thank you. I’d actually like the sidebars to disappear on sceens smaller than 1024px wide.

    For that – use this CSS:

    :root {
    --sb-width: 320px;
}

@media(max-width: 1023px) {
    .both-sidebars .site-content .sidebar {
        display: none;
    }
    .both-sidebars .site-content .content-area {
        width: 100%;
    }
}
@media(min-width: 1024px) {
    .both-sidebars .site-content .content-area {
        width: calc(100% - ( var(--sb-width) * 2));
    }
    .both-sidebars .site-content .sidebar {
        width: var(--sb-width);
    }
    
    .inside-left-sidebar, .inside-right-sidebar {
        padding-inline: 10px;
        height: 100%;
    }
}
    Thread Starter dukearmi

    (@dukearmi)

    Almost perfect. Now I just need to remove the right sidebar on widths between 1024px and 1200px.

    Thread Starter dukearmi

    (@dukearmi)

    I think I figured it out with ChatGPT. It’s doing what it’s supposed to do but maybe you could take a look and see if anything needs adjusting?

    :root {
    --sb-width: 320px;
}

@media (max-width: 1023px) {
    .both-sidebars .site-content .sidebar {
        display: none;
    }
    .both-sidebars .site-content .content-area {
        width: 100%;
    }
}

@media (min-width: 1024px) and (max-width: 1200px) {
    .both-sidebars .is-right-sidebar {
        display: none;
    }
    .both-sidebars .site-content .content-area {
        width: calc(100% - var(--sb-width));
    }
    .both-sidebars .site-content .sidebar {
        width: var(--sb-width);
    }
    
    .inside-left-sidebar,
    .inside-right-sidebar {
        padding-inline: 10px;
        height: 100%;
    }
}

@media (min-width: 1201px) {
    .both-sidebars .site-content .content-area {
        width: calc(100% - (var(--sb-width) * 2));
    }
    .both-sidebars .site-content .sidebar {
        width: var(--sb-width);
    }
    
    .inside-left-sidebar,
    .inside-right-sidebar {
        padding-inline: 10px;
        height: 100%;
    }
}

    Looks ok to me. Glad to see you got it working

    Thread Starter dukearmi

    (@dukearmi)

    Thank you. I appreciate your help ??

    You’re welcome

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Two Sidebar Layout’ is closed to new replies.