[Support request] Sider – Slide out & more

[David]

Hi team,

I’m trying Sider.

Few questions:

1 – Where can I change the width of the left fixed side bar ?

2- About the background appearing behind the posts list :
Customizing >Layout >Container, is there any way to have content layout set to separate container for desktop and set to one container on mobile? …OR manage 2 different Separating Space options for desktop & mobile

3- on desktop & tablet, is there any way to have the left side bar collapsable with just a burger menu to uncollapse it?

Thanks a lot for your help !

[David]

Hi David,

1. This is set in the Customiser > Additional CSS : This code – i have commented here only to show you what needs changing.

body {
    padding: 0 50px 50px;
    margin-left: 300px; /* Change margin to match width below */
}

.site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px; /* Change width to match margin above */
    z-index: 300;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .1s ease;
}

2. What is it you are trying to achieve? No body background showing on the mobile version?

3. This would be cool but would requires some custom coding.

[David]

Thanks for your reply!

About 2nd point : In fact, the post image could act as a “post separator” but because we can have a post without an image we need something else. So I need to keep the “separate containers” option, and if possible, have a different “Separating Space” options for mobile.

I’m adding 2 questions :

4- While using this Display posts in masonry grid there is a bug. Some posts appears collapsed together…and some not.
check this :
https://ibb.co/eLna08
https://ibb.co/kGL67o

5- How can I set the body font size for mobile (15px) different from the desktop one (17px)

thanks again!

[David]

2. You can do this for adjusting the Post margins on mobile:

@media (max-width: 768px) {
    .archive .post,
    .blog .post, {
        margin-bottom: 5px:
    }
}

4. Neither of these links are opening – they just time out
5. Responsive font sizes:
https://generatepress.com/forums/topic/how-to-create-different-font-size-for-desktop-tablet-and-mobile/

[Author]

Posts