In an elementor site which I did not build (and I am not an elementor expert in any way) I was asked to resolve a problem.
The problem is that some area of the page gets corrupted when switching to mobile.
I managed to dig using the developer console and find that this happens because of a css rule that looks like this:
<code>@media (max-width: 767px) {
....
....
.elementor-column {
width: 100%;
}
}
</code>
<code>@media (max-width: 767px) {
....
....
.elementor-column {
width: 100%;
}
}
</code>
@media (max-width: 767px) {
....
....
.elementor-column {
width: 100%;
}
}
I which causes some adjacent column elements to grow out of proportion.
What would be the right way to handle this?
should I use the advanced – custom css to over ride this ?
or should this remain and the issue is a structural issue? (like a missing parent element?)
Is there a methodology for handling this type of situation?