Hello,
I have been searching and trying different code for the better part of a day and I can’t figure out a solution. I have a Color Section with three (3) 1/3 Columns, each with a Text Box. On desktop the section displays nicely, but on mobile there is a sizable gap between the first and second column and second and third column.
I know this gap to be a #div .av-flex-placeholder. I would like to remove these two (2) gaps on mobile so that the content within each column flows continuously down the page. Any chance someone can help me to come up with a solution for this? This color section appears on over 50 pages of the site, albeit with unique content, but the layout is the same on each… so it isn’t just on one single page.
I’ve added an image along with logins.
Thank you!
Hey eskitaco,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) {
.page-id-2607 #av_section_2 .av_one_third {
padding:0 !important;
margin-bottom:0 !important;
}
}
Best regards,
Rikard
Hey Rikard,
Unfortunately the suggested code didn’t work when I applied it to a specific page. Also keep in mind the code needs to be universal for the entire site, not just one page. Thanks
Hi,
Please try this instead:
@media only screen and (max-width: 767px) {
.av_one_third {
padding:0 !important;
margin-bottom:0 !important;
}
}
Best regards,
Rikard
Hi,
Unfortunately that didn’t work either when I put the code at the top of Custom CSS. Any other suggestions? I included a pic of another page showing the space.
Hi eskitaco,
Could you please clear the cache, check again and get back to us.
https://cl.ly/4b3fce42a697 It looks fine on my end.
Best regards,
Victoria
Yep, that was it. Thank you, Victoria and Rikard. Appreciate the Support from the Enfold Team. Top notch as always. Please close the topic.