Hello,
First of all, I will be showing you a lot of screenshots but please don’t feel overwhelmed, what I’m asking will be very simple to you!
Basically, I’m trying to modify most of my layout padding on mobile. So I tried using the Chrome “Inspect” tool to do so, however unlike most of the other elements (e.g; “.single-product .single-product-main-image”) when it comes to padding I’m only seeing “element.style“. I can’t seem to be able to modify this at all using the Quick CSS box.
Perhaps this is because I’m trying to modify the layouts themselves (cells, color sections, grid rows,…). But then again this is my first website ever and I’m not a developer at all so I don’t know what I’m doing.
So the only thing I need help with is to figure out how to modify the padding of the “element.style”. You don’t need to send me the full codes, just tell me where I can find the right “line” to put under “@media only screen and (max-width: 767px)” The kind of “line” starting with a dot or something. I’m not familiar with the technical lingo so I’m sorry if I’m confusing you.
Hey DeMamp,
Those are all different elements and you need to know css selectors to be able to add the css to adjust those for different screen sizes.
Here is some of the code:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin.avia-builder-el-30,
.responsive #top #wrap_all .av-flex-cells .no_margin.avia-builder-el-50 {
min-height: 300px;
}
.responsive #top #wrap_all .flex_column {
padding: 30px 10px !important;
}
}
Can you disable caching and minification for now?
SO that we can make the rest of the adjustments easier.
Best regards,
Victoria