[Resolved] The Separating Space

[Anil]

I set separating space as 10px under Appearance > Customize > Layout > Container.

How to increase this to 20px in desktop…. using latest versions of theme and plugin with flexbox, using 2 columns layout….

[David]

Hi there,

can you share a link to the site so i can see the layout ?

[Anil]

Ok, I mentioned…

[Anil]

I would like to have 3 things with the site:

1. Separating space
a. ipad and smaller devices – it is 10px as set in customiser
b. in desktop it should be 20px (css required)

2. div #page
a. ipad and smaller devices – left and right margin – 10px (as separating space) (css required)
b. in desktop – left and right margin – 20px (as separating space) (css required)

3. nav bar – left and right space as above

[David]

Try this CSS:

@media(min-width: 1024px) {
    .separate-containers .site-main {
        margin: 20px;
    }
    .separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .generate-columns-container {
        margin-left: -20px;
    }
    .generate-columns {
        margin-bottom: 20px;
        padding-left: 20px;
    }
    .sidebar .widget {
        margin-bottom: 20px;
    }
    .navigation-branding {
        margin-left: 20px !important;
    }
    .main-navigation .inside-navigation {
        padding-right: 10px !important;
    }
}

[Anil]

Thanks David,

is this correct to have spacing left and right

@media(max-width: 1023px) {
    div#page {margin-left:10px; margin-right:10px}
}

@media(min-width: 1024px) {
    div#page {margin-left:20px; margin-right:20px}
}

[Anil]

I found mine css not good to have margin on left and right…
what is the right way…

[David]

The layout of the site has changed since i first checked it – are you still requiring the 20px separating space on larger screens ?

[Anil]

Hi David,

I found css for separating space is not flawless… there was issue on category pages, tag pages, and sometimes with pagination div….

I think changing separating space with css is having some adverse reaction with theme and layout… so I dropped the idea, and would remain with inbuilt option with customiser. I believe, you need to re-build this in customiser for different devices.

Now, I like to have 10px margin on left and right side…
but following css is not fool-proof, can you suggest better one….

div#page {margin-left:10px; margin-right:10px}

[Anil]

it’s better to close this now 🙂

[David]

No problems 🙂

[Author]

Posts