I’ve configured the margins that I want using the default “view” (desktop) on many pages.
And now I’ve discovered that in smaller screens (phones at least) most of those margins are not respected and sometimes there is no margin at all between elements that have big margins in the default/desktop.
I think I can set up manually different margins for each device, but I’m not interested in that (it’s a lot of work to set up one by one hundreds of blocks in many different pages with new margins for 3-4 different sizes).
Not 100% sure, but I think this is the CSS code that is messing with most of my default margins (maybe there are more code snippets that are affecting some of my margins, these are just the 2 that I detected in a quick review):
@media (max-width: 768px) {
.fl-row[data-node] .fl-row-content-wrap {
margin: 0;
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 768px) {
.fl-node-lx5kcafn3ho8 > .fl-module-content {
margin-top: 20px;
margin-bottom: 20px;
}
}
I guess I could remove that code somewhere, but doesn’t seem like a clean and maintanable solution.
How can I stop that code from messing with my margins (or whatever thing that causing that) without having to change manually the setup of each block?