Symmetry theme collapsible tab width and description width crammed together on mobile

[Vicki_Reale]

When I look at mobile version of my website the “Product Grouped” section and my descriptions are all crammed into a narrow column instead of stretching the whole width of the phone. Look at this on your mobile phone:

Product page

How do I fix those tabs from overlapping and stretch out my description?

[Spac-es]

delete this code from your file called ebb-style.css (appears twice):

line 1640 and line 198.

.product.product-grouped {
              padding: 0 100px;
          }

Before:

After:

[Vicki_Reale]

You rock! I got so many spam messages in my Facebook Messenger. Thank you for being honest and helpful!

[Vicki_Reale]

@Spac-es Do you happen to have any suggestions so the Horizontal Tab above the description isn’t so crammed together and only have the words are showing for: “Description, Customer Reviews, Bodyboard Quiz, Shipping info”?

[Spac-es]

To prevent these elements from stacking on top of each other, you must first locate the following code (ebb-style.css):

You should add a gap of approximately 15px (adjust it as you want). The code will look something like this:

.tabs__product-page .list-tabs {
    margin: 0 0 30px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding-bottom: 5px;
    gap: 15px;
}

Before:

After:

[Vicki_Reale]

AWESOME!!! THANK YOU!