[Resolved] The Separating Space

Home Forums Support [Resolved] The Separating Space

Home Forums Support The Separating Space

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2079980
    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….

    #2080107
    David
    Staff
    Customer Support

    Hi there,

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

    #2080883
    Anil

    Ok, I mentioned…

    #2080891
    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

    #2081103
    David
    Staff
    Customer Support

    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;
        }
    }
    #2081377
    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}
    }
    #2081402
    Anil

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

    #2081916
    David
    Staff
    Customer Support

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

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

    #2082294
    Anil

    it’s better to close this now ๐Ÿ™‚

    #2082918
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.