Seperating Space

Hi there,

set destkop spacing in the customiser and then use this code for mobile:

@media (max-width: 768px) {
    .separate-containers .site-main > * {
        margin-bottom: 10px !important;
    }
    .separate-containers .site-main {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

Hi, above css not working properly,

Please confirm if below one is fine:

@media (max-width: 768px) {
    .separate-containers .site-main > * {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .separate-containers .site-main {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

Hi there,

what isn't working properly? Is it just the space after the last article? If so then yes that code would work

space after each article was not reducing with your code, so i added one more line to reduce bottom space....

do you find edited code is correct ??

I edited the code above with some !important tags, add that and let me know.

margin-top: 10px !important;

this line is 2 times in second block, is this mistake or it is required 2 times ???

your code not working after each post, please check the site....

Yes, sorry the code above should have been top and bottom. Which i corrected. However I can see your CSS in the Site which is working - it looks like your Autoptimize cache needs flushing and then try clearing your browser cache. Personally i switch off autoptimize when building or making CSS changes to a site. Let me know

David, your code is not working fine...

@media (max-width: 768px) {
    .separate-containers .site-main > * {
        margin-top: 10px !important;
    }
    .separate-containers .site-main {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

Following code with additional line in first block working fine...

@media (max-width: 768px) {
    .separate-containers .site-main > * {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    .separate-containers .site-main {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

Thats great to hear. I would use your code then :)
Note: my mistake it should only need the margin-bottom :) on the first rule

Yes, it only needs the margin-bottom 🙂 on the first rule, following working fine:

@media (max-width: 768px) {
    .separate-containers .site-main > * {
        margin-bottom: 10px !important;
    }
    .separate-containers .site-main {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

Haha i think i have gone code blind today, should have spotted it early. So thanks for your patience. You will see how the margins collapse into one when added to top and bottom :)

Thanks for all your help, bye.

You're welcome