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 · Accepted solution]

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:

[Spac-es · Accepted solution]

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 · Accepted solution]

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!