[Resolved] 32.5% sidebar width in desktop, but reflecting on mobile too

Home Forums Support 32.5% sidebar width in desktop, but reflecting on mobile too

  • This topic has 1 reply, 2 voices, and was last updated 2 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1376482
    Ashin

    Hello,

    I wanted to show 32.5% sidebar and 67.5% content area. I used the bwlow CSS code which I saw in some of your support queries.

    .sidebar.grid-35 {
        width: 32.5%;
    }
    .content-area.grid-65 {
        width: 67.5%;
    }

    It’s working very well on desktop, but unfortunately it’s also getting affected on mobile where the sidebar shows at the bottom. So, the content area in mobile gets a big padding on the left. No such issues on tablet, though.

    Which CSS code to use to make sidebar 32.5% on desktop only with no effect on mobile/tablet?

    #1376725
    David
    Staff
    Customer Support

    Hi there,

    you can use @media queries:

    https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

    For tablet to desktop devices you would do this:

    @media (min-width: 769px) {
        .sidebar.grid-35 {
            width: 32.5%;
        }
        .content-area.grid-65 {
            width: 67.5%;
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.