Overlapping vertical columns embedded in a Tab Section - Support

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
April 27, 2023 at 11:30 pm #1405881

mikegrace78
Participant

Hi Team,
Hoping you can help me resolve an issue with overlapping columns embedded within a Tab Section?

The columns look great on a big screen (spaced horizontally) , but when viewed on mobile, the columns are arranged vertically (expected behaviour), but happen to overlap at the bottom/top of each.

I’ve tried most of the settings within the columns and tab section but can’t seem to resolve.

Please help! Thank you :)

April 28, 2023 at 6:00 am #1405907
Ismael
Moderator
Hey mikegrace78,

Thank you for the inquiry.

Adding this css code should prevent the columns from overlapping each other.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

  .responsive #top .container .av-content-small,
  .responsive #top #wrap_all .flex_column,
  .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 50px;
    width: 100%;
  }
}
```
Please adjust the margin-bottom value to suit your specific layout.

Best regards,
Ismael
April 28, 2023 at 5:10 pm #1405945

mikegrace78
Participant

Thanks Ismael,

Sorry for the beginner question, but where should I add this code?

Thank you!

April 28, 2023 at 5:18 pm #1405946

mikegrace78
Participant

Sorry again,
I searched for adding CSS and was able to add the provided code to quick CSS – all good there. Unfortunately there is no change to the overlap. Am I doing something wrong? Thanks very much for your patience!!

April 29, 2023 at 1:39 pm #1405986

Mike
Moderator

Hi,
I believe that you are referring to this overlap on mobile:

I didn’t find Ismael’s css above active on your site, please ensure that you have added it to Enfold Theme Options ▸ General Styling ▸ Quick CSS field and copy the code from the forum and not an email notification so the symbols are not converted.
if you have done this try deactivating Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and clearing your browser cache and check again, if it then works you can reenable the JS & CSS file merging and compression.
If it doesn’t work please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
If this still doesn’t help please include an admin login in the Private Content area so we can check.

Best regards,
Mike

May 3, 2023 at 6:11 pm #1406367

mikegrace78
Participant

Hi team,

Thanks for the help so far. I seem to have resolved the issue by replacing a few of the column elements on the affected pages. Really appreciate your help and support! All fixed!

May 3, 2023 at 8:05 pm #1406384

Mike
Moderator

Hi,
Glad to hear that you have this sorted out, 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
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Overlapping vertical columns embedded in a Tab Section’ is closed to new replies.