How to adjust product page padding in Debutify theme?

[TBNP22]

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:

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.

[Beae_Cass]

Hi @TBNP22 ,

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

[salmanmukhtar]

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>

[TBNP22]

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]

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.
}

[TBNP22]

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]

The media screen css part will also be the part of style tag. In other
words, put the media query part bfore closing tag

[TBNP22]

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 · 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>

[salmanmukhtar]

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;

[Pocro]

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