Solved

How to adjust product page padding in Debutify theme?

TBNP22
Tourist
14 0 1

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:

 
TBNP22_0-1694083000022.png

 

If I paste this into my theme.scss but with different values, it doesn't work. 
 
What code should I use? Any help is appreciated.
 
 
Accepted Solution (1)
salmanmukhtar
Shopify Partner
19 2 2

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>

Feel Free to reach out to me at:
letstalk@devsinn.co or smfedeveloper@gmail.com
for Shopify Design and Development Services.


I am a coffee lover, so buy me a coffee here if my solution works 🙂 Buy me A Coffee

View solution in original post

Replies 9 (9)

Beae_Anthony
Shopify Partner
436 167 175

Hi @TBNP22 ,

Could you please share your store URL, so that I can help you

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog

salmanmukhtar
Shopify Partner
19 2 2

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>

Feel Free to reach out to me at:
letstalk@devsinn.co or smfedeveloper@gmail.com
for Shopify Design and Development Services.


I am a coffee lover, so buy me a coffee here if my solution works 🙂 Buy me A Coffee
TBNP22
Tourist
14 0 1

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

salmanmukhtar
Shopify Partner
19 2 2
You can reset the default values in media query

@media screen (min-width:320px) and (max-width:767px)
{
Add mobile default values here beneath the code I sent to you earlier.
}
Feel Free to reach out to me at:
letstalk@devsinn.co or smfedeveloper@gmail.com
for Shopify Design and Development Services.


I am a coffee lover, so buy me a coffee here if my solution works 🙂 Buy me A Coffee
TBNP22
Tourist
14 0 1

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%;
}

salmanmukhtar
Shopify Partner
19 2 2
The media screen css part will also be the part of style tag. In other
words, put the media query part bfore closing tag
Feel Free to reach out to me at:
letstalk@devsinn.co or smfedeveloper@gmail.com
for Shopify Design and Development Services.


I am a coffee lover, so buy me a coffee here if my solution works 🙂 Buy me A Coffee
TBNP22
Tourist
14 0 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>

salmanmukhtar
Shopify Partner
19 2 2

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>

Feel Free to reach out to me at:
letstalk@devsinn.co or smfedeveloper@gmail.com
for Shopify Design and Development Services.


I am a coffee lover, so buy me a coffee here if my solution works 🙂 Buy me A Coffee
salmanmukhtar
Shopify Partner
19 2 2
Use the below code:

&lt;br&gt;#shopify-section-template--14496620183681__main&lt;br&gt;.product-single__meta--wrapper {&lt;br&gt;padding-left: 16%;&lt;br&gt;padding-right: 7%;}&lt;br&gt;@media screen and (min-width:320px) and (max-width:767px){&lt;br&gt;&lt;br&gt;#shopify-section-template--14496620183681__main&lt;br&gt;.product-single__meta--wrapper{&lt;br&gt;padding-left: 6%;&lt;br&gt;padding-right: 1%;&lt;br&gt;}&lt;br&gt;}&lt;br&gt;
Feel Free to reach out to me at:
letstalk@devsinn.co or smfedeveloper@gmail.com
for Shopify Design and Development Services.


I am a coffee lover, so buy me a coffee here if my solution works 🙂 Buy me A Coffee