Tagged: color sections, gap
I have two colorsections on my front page. On desktop everything looks fine, but on mobile the gap is huge.
I have tried a couple of suggestions mentioned in previous posts, but nothing does the trick.
I have a separator between the sections, but it is set to not show on small screen.
I have tried this css:
@media only screen and (max-width: 767px) {
.template-page.content.av-content-full.alpha.units{
padding-top:0px!important;
padding-bottom:0px!important;
}}
Any ideas?
Regards
Nina
Your code should actually work because of the important setting.
Try first renewing the caching / merging of Enfold?
_______
on your selector there are only classes ! A class is not so high in specifity than an ID.
not knowing your page – i can not say if your selctor is the right one – but try:
@media only screen and (max-width: 767px) {
#top #main .avia-section .content {
padding-top: 0;
padding-bottom: 0;
}
}
Sorry, i’ve tried that in a few different ways, but it is not working.
I took the elements out of the color section, even if that was not ideal, and the huge gap is gone. I guess it has to be that way for now.
Regards
Nina
To better advise; is there a link to this page?
If you don’t want to make the link public, you’ll have to wait until the mods are here to see your private message.
Hi,
Thank you for the inquiry.
I have a separator between the sections, but it is set to not show on small screen.
This automatically creates another generic color section, which creates the huge space even if the separator is set to be hidden on mobile view. You can manually add another color section, place the separator there, and then set this color section’s visibility accordingly.
Best regards,
Ismael