Shopify themes, liquid, logos, and UX
I am using the debutify theme and would like to change the padding for the right grid item on the product page. When I view the page source, this is what it is currently set to:
Solved! Go to the solution
This is an accepted solution.
@TBNP22 here is the correct code, sorry about my previous reply, that was broken.
<style>
#shopify-section-template--14496620183681__main .product-single__meta--wrapper {
padding-left: 16%;
padding-right: 7%;}
@media screen and (min-width:320px) and (max-width:767px)
{
#shopify-section-template--14496620183681__main .product-single__meta--wrapper{
padding-left: 6%;
padding-right: 1%;
}
}
</style>
Hi @TBNP22 ,
Could you please share your store URL, so that I can help you
Hello @TBNP22
Would you mind sharing URL of your store please?
This could be due to the values you are adding are being overridden by default values in the theme. You can try adding the code above in theme.liquid file as well like this:
<style>
Your code here.
</style>
Hello @salmanmukhtar
Thanks for this! It worked but also changed my mobile view, what do I need to add so it only applies to desktop?
Thanks
Like this?
<style>
#shopify-section-template--14496620183681__main .product-single__meta--wrapper {
padding-left: 16%;
padding-right: 7%;
}
</style>
@media screen (min-width:320px) and (max-width:767px)
{
padding-left: 6%;
padding-right: 1%;
}
Unfortunately didn't work. It is still using the first values. This is correct?
<style>
#shopify-section-template--14496620183681__main .product-single__meta--wrapper {
padding-left: 16%;
padding-right: 7%;}
@media screen (min-width:320px) and (max-width:767px)
{
padding-left: 6%;
padding-right: 1%;
}
</style>
This is an accepted solution.
@TBNP22 here is the correct code, sorry about my previous reply, that was broken.
<style>
#shopify-section-template--14496620183681__main .product-single__meta--wrapper {
padding-left: 16%;
padding-right: 7%;}
@media screen and (min-width:320px) and (max-width:767px)
{
#shopify-section-template--14496620183681__main .product-single__meta--wrapper{
padding-left: 6%;
padding-right: 1%;
}
}
</style>
Hello, I need help ASAP with this issue on my store. I'm using debutify and there is this weird padding beneth the product page that I can't remove. I dont know where I need to go into the code to remove it.
Please see this image. I would basically like to remove this padding entirely
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025