Trying to add a margin or limit the text to the center of my page

[Rubenith]

I was trying to replace the Dawn theme description box on my website, but the text was edge to edge on the website. I want to limit the movement to the center with a little bit of room on the side.

I have barely any knowledge about CSS Liquid, so there’s not much I can do…

Is there any way I could add CSS properties, or if not, any other way to do this?

Picture below:

[Rubenith]

Ah one more thing.. This is the code I used to add the description.

{{ product.description }}

[Dan-From-Ryviu]

Could you share a product page link to check?

[Rubenith]

Here you go. I managed to fix the centering issue, but the margins are still too far for comfort..
https://86daf1.myshopify.com/products/crispy-cotton-tee

[Dan-From-Ryviu]

Hi @Rubenith , please remove code you added and using this one instead of

.product__description {
    max-width: var(--page-width) !important;
    margin: 0 auto;
    padding: 0 5rem;
}

This is result

[Rubenith]

Do I replace the whole code? Or does this go in CSS? It doesn’t work for me, only showing up with the code printed on the page instead..

[Dan-From-Ryviu]

Hi @Rubenith , please remove this code only

Because it causes your page look like this on mobile devices

[BSS-Commerce]

Hi @Rubenith

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Rubenith]

Here it is: https://86daf1.myshopify.com/products/crispy-cotton-tee

[Rubenith]

Right I did that.. It fixed the mobile issue, but when I put the previous code into CSS or the description, it comes up with an error.. Any way to fix that?

[BSS-Commerce]

Hi @Rubenith

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

1. Online Store → Themes → Edit code

2. Find the base.css file and add this code at the end of the file:

.product__description {
    max-width: var(--page-width) !important;
    margin: 0 auto !important;
}
@media screen and (min-width: 540px) {
   .product__description{
       padding: 0 10rem !important;
   }
}

Result:

• Mobile:

• PC

Hope this helps you.

[Rubenith]

Yesss, it worked. Thanks for the help everyone

[BSS-Commerce]

Hi @Rubenith

We’re happy to see that our suggestion helped you solve the issue. Can you kindly give us a like? This can be a reference for other merchants if they have an issue like you and greatly motivate us.
Thanks in advance.