The Separating Space

Hi there,

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

Ok, I mentioned...

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

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;
    }
}

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}
}

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

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

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}

it's better to close this now :-)

No problems :)