Tagged: gap, margin, responsive
Hi there
I’m having great difficulty adding a gap where the red arrow is on the enclosed image. It affects lots of pages but here’s the example I refer to:https://www.swarez.co.uk/modern-art-paintings-for-sale/wavey-davey/
It’s only a problem when on a small screen in responsive mode. Try it on a smartphone and you’ll see the issue.
I tried this code but whilst sorting the problem it sent all manner of other things haywire!!!
@media only screen and (max-width: 767px)
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
margin-bottom: 20px;
}
I also isolated .responsive #top #wrap_all .flex_column
but still the same – problem fixed with the 20px margin but then my other columns and portfolio columns went wrong!
Any ideas would be appreciated.
Thanks
Ed
Hi Ed,
Please try adding a class to the element in question, if you don’t have that option active you can activate it under Enfold->Layout Builder (Show element options for developers). Add a class called second-col for instance, then you use this in Quick CSS:
@media only screen and (max-width: 767px) {
.second-col {
margin-top:30px !important;
}
}
Best regards,
Rikard
Thank you Rickard
Works great now that I figured out where to place the snippet (after creating the CSS class).
Thank you for your help – one to bear in mind for the future!
Kind regrads
Ed
Hi Ed,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Thanks Rikard – you can close this now – thank you !!!!
Hi,
Glad we could help!
Don’t forget to bookmark Enfold Documentation for future reference.
Thank you for using Enfold :)
Best regards,
Vinay