Hi,
i added a color section, with 3 columns per row and two rows.
When the screen-size (tablet) is reduced, there is too much space between the 3rd and the 4th row. Please see screenshot 1.
Mike helped me with this, so I added his code:
@media only screen and (max-width: 989px) {
#top.home .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
margin-top: 0;
}
}
This works well, but now also the space of my headline on the top of the color section is now reduced, which should not.
How can I fix that?
kind regards Jak
Hey Jak73,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (max-width: 989px) {
#top.home #leistungen .avia-builder-el-8 p {
margin-bottom: 1.85em;
}
}
adjust to suit.
Best regards,
Mike
Hi Mike,
this works well for one color section.
I got the same issue with the other color-section?
How can i fix that?
kind regards
Jak
Hi,
Add this CSS
@media only screen and (max-width: 989px) {
#top.home #service .avia-builder-el-49 p {
margin-bottom: 1.85em;
}
#top.home .flex_column_table.av-equal-height-column-flextable.av-9pa8e-8f916ca769a4d466ee08dbf3fddc5a77:not(:first-child) {
margin-top: 40px;
}
}
Best regards,
Mike
Hi Mike,
very nice!!!
Thank you very much for your help!
kind regards
Jak
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike