Archived topic

Sider - Slide out & more

3 replies · Started by David on June 8, 2018

Viewing posts 1–4 of 4

June 8, 2018 at 2:29 am #594941

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 !

June 8, 2018 at 3:46 am #594982

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.

June 8, 2018 at 5:09 am #595040

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!

June 8, 2018 at 6:09 am #595095

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/

This archived topic is closed to new replies.

Start building better websites today.