A Shopify store owner encountered mobile layout issues with the Symmetry theme where product grouped sections and descriptions were compressed into a narrow column instead of spanning full width. Additionally, horizontal tabs (Description, Customer Reviews, etc.) appeared crammed together.
Solution provided:
ebb-style.css (lines 1640 and 198) that adds excessive padding:.product.product-grouped {
padding: 0 100px;
}
.tabs__product-page .list-tabs in the same CSS file.Outcome:
Both fixes successfully resolved the mobile display issues. The product sections now utilize full screen width, and tabs display properly without overlapping text.
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:
How do I fix those tabs from overlapping and stretch out my description?
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:
You rock! I got so many spam messages in my Facebook Messenger. Thank you for being honest and helpful!
@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”?
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:
AWESOME!!! THANK YOU!
