Issue: Elements on the product page overlap when the description is short, especially below the “tillbehör” (accessories) section in a draft Shopify theme.
Context: Long descriptions prevent the overlap; switching to Tabs can shorten content and trigger the problem. A preview link and multiple screenshots were provided; visuals are central to understanding.
Attempts:
Status: No resolution yet. The user provided a product link with longer description and is seeking a targeted fix that adds spacing only beneath the relevant section without affecting other elements.
Does anyone know how to fix this, these elements are overlapping,
Not a problem when i have longer description on the page but that is not always the case, should be some padding under the “tillbehör” section
https://did4zqnh7ipsok0q-24276923.shopifypreview.com
If anyone has a fix for this i will be more then happy!
Hey @emilbrandon
Can you send a product link that has a longer description? I’m unable to locate a product like that on your store.
Best Regards,
Moeed
Hello @emilbrandon
Go to online store ----> themes ----> actions ----> edit code---->theme.css —> line number 997
search this code
@media screen and (min-width: 641px) {
.container {
padding: 0 var(--desktop-container-gutter);
}
}
and replace with this code.
@media screen and (min-width: 641px) {
.container {
padding: 1 var(--desktop-container-gutter);
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hello Moeed, thanks for your answer,
Yes here is a link with longer, note this is in a draf theme, and we experiance this when we change the Tabs, and the descriptoin become shorter regarding on the content,
Hello @emilbrandon
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
This did kinda work, but added alot of padding or margin to all the element belove the problem is just the overlapping not the distance
Go to online store ----> themes ----> actions ----> edit code---->theme.css —> line number 997
search this code
@media screen and (min-width: 641px) {
.section__header {
margin-bottom: 15px;
}
}
and replace with this code.
@media screen and (min-width: 641px) {
.section__header {
margin-bottom: 70px !important;
}
}
result
Thanks
did you have a solution for this?
