How can I adjust spacing on Debut Theme product page for mobile view?

[timotheusb1]

Hey there,

I realized that the spacing on my product page is a bit off when using a mobile view. To the left, there is more space left than to the right:

Can someone explain to me where in the code / Styling I can check for this and adjust it, so the text is and the grey block is really in the middle of the screen?

Note: I do not have the “Theme.scss.css” Asset.

Grateful for any help here

Kind regards

Tim

[Made4uo-Ribe]

Hi @timotheusb1 ,

You need to reduce the padding or margin on that area. You dont have theme.css but you have another file name that ends with .css. WOuld you mind to share your URL website (with password if its protected)? Thanks!

[timotheusb1]

Hi @Made4uo-Ribe

url: https://www.bamboostar.de/products/bamboo-star-bambus-socken

I have the asset: Theme.Css

Thankful for any tipps.

Thank you for your help & time.

kind regards

Tim

[Made4uo-Ribe]

Thank you for the information.

Try this.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “theme.css, styles.css or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

@media only screen and (max-width: 749px){
.grid__item.medium-up--one-half {
    padding-left: 0px;
}
.product-single__meta {
    padding-left: 0px;
    padding-right: 0px;
}
}

• Result:

• 

  I hope it help.

[timotheusb1]

Hi @Made4uo-Ribe ,

thank you for the help. Now the spacing is right.

But now the spacing of the words and buttons is a little off. Everything should move just a little to the right.

Here how it looks on mobile now:

Here how it looks:

Here is how I would like it to look:

site of reference: https://juice-box.at/products/juicebox?variant=39470286307493

Do you see the difference and do you know how to make my page have the same spacing?

Thank you so much for your help!

Kind regards

Tim

[Made4uo-Ribe]

Yes we can do that but do you want everything on that area will be move to the right? or you want a specific one? We can move it all at once but not lined and if you like to line it one by one, it would take some time.

.product-single__meta * {
    margin-left: 10px;
}

This is the one can move all to the right.

Result:

[timotheusb1]

Hi @Made4uo-Ribe ,

thank you for the response and help.

I see that the add to cart button looks weird if we just push everything to the right..

is there a way I can check what styling the site of reference ( https://juice-box.at/products/juicebox ) is using and apply the exact same styling to my text and buttons?

That would solve the problem definietly.

kind regards

Tim

[Made4uo-Ribe]

Yes we can do that, the style they have on that website is attach on the html.

If you know a bit of coding you can add this too in your HTML.

You need to put this one in your html.

background-color: #F7F7F7;
    padding: 25px 25px 5px 25px;
    border-radius: 20px;

And the name of the selector is this one.

Result:

[timotheusb1]

Hi @Made4uo-Ribe

thank you very much for telling me how I could do it.

sadly, I do not know html, but I want to learn, how I can implement it.

where do I need to put the code in?

or how do I put this Code in my html?

Understanding this would help me so much for the future.

thank you so much

kind regards

Tim

[timotheusb1]

Hi @Made4uo-Ribe

If you had the time to check, I would be super super glad to get some instructions.

Wish you the best and thanks

Tim

[Made4uo-Ribe]

Hi @timotheusb1 ,

We can copy the style of https://juice-box.at/products/juicebox , no need html we can just put in your theme.css.

try this paste in your theme.css.

@media only screen and (max-width: 749px){
.product-single__meta {
    background-color: #F7F7F7;
    padding: 25px 25px 5px 25px;
    border-radius: 20px;
}
}

Result:

I hope it help.