[Resolved] Width and Padding for Tablet view

[Christian]

Hello,

I am trying to adjust the spacing for the tablet view. There I have got two issues:

1. I wanted to hide the sidebar for mobile and tablet and set the following CSS code in the Customizer > Additional CSS.

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

This first part applies because the sidebar is not displayed anymore for tablet. However, the second one to increase the width to 100% doesn’t apply for the tablet view. I still have 75% when checking with the console in the browser.

2. I have a grey background for the body and a white background for the content container. So, I have set left and right padding to 100px for the container in the Customizer > Layout > Container. On desktop it looks good but on tablet it’s too much. I can’t change it for tablet in the customizer settings. David said in another topic (https://generatepress.com/forums/topic/tablet-content-padding/) that such big paddings are not a good way to go for the content container. However, how can I achieve what I try to do esp. with the white body background. Or is it the only way to add some additional padding for the tablet view? I have found this code in the forum but it doesn’t work:

@media (min-width: 769px) and (max-width: 1024px) {
    .one-container .site-content {
        padding: 30px 50px;
    }
}

Thanks for your help!

[David]

Hi there,

can i see the site ? As adding 100px of padding either side of the container is going to cause some headaches, so we can look at alternatives to provide what you need.

[Christian]

Hello David,

thanks for your reply! I set the information in the private information part of the topic.

Christian

[David]

Ok perfect. I would do the following:

1. Set the left and right padding back to a “normal” value eg. 30px ( adjust to suit ).

2. In Appearance > Elements -> Add New –> Layout Element.
2.1 On the Content tab leave the Content Area as Default and set the Content Width to 1200px.
That will give you the same 100px space either size, but without the padding squeeze.
2.2 Set the Display Rules to: Posts -> All Posts.
Include any other places you want to apply it to.

3. Now for some CSS to remove the Sidebar on smaller screens:

@media (max-width: 1024px) {
    .sidebar {
        display: none;
    }
    #content .content-area {
        width: 100%;
    }
    #content .content-area #main {
        margin-right: 0;
    }
}

[Christian]

Hello David,

thanks for your help! It’s working!

Is there a way to control it for the right and left side separately? So that I have 100px on the left side and 50px on the right side for example?

Best regards
Christian

[David]

Are you wanting to narrow the main content so it sits more central ?

[Christian]

I actually want to give the content of the sidebar a bit more space on the right side and that’s why I would like to have a bit less padding on the right side for the content container.

[Fernando]

Hi Christian,

If you’re looking to make the sidebar wider, you can alter it through Appearance > Customize > Layout > Sidebars. Reference: https://docs.generatepress.com/article/sidebar-layout-overview/

[Christian]

Hi Fernando,

there I have only the possibility to set the width in general but not only the padding on the right side.

[David]

So i would do:

1. Increase the width of the right sidebar to 30%.
2. Add this CSS:

.right-sidebar #content {
    margin-right: 20px;
}

This will increase the width of the right sidebar and it will consume the space to the right.

[Christian]

Thanks for very much your help! It’s working and I have got exactly what I wanted to achieve.

I really appreciate and enjoy your support! Definitely another reason why I will stick with Generatepress & blocks and recommend it to others. 🙂

[David]

We appreciate the kind words, glad to be of help !!

[Author]

Posts