How to change the width of text on mobile

[CreatorTim]

Hey, I’d like to set the width of all text (Image with Text, text in the Email Sign-Up section, Product Description) to be the same as the text width in the Rich Text section.

So like this:

Maybe it will be enough if you give me the code for each section separately (Image with Text, Rich Text, Product Descriptions, Email Sign-Up…), and I’ll add it to the section’s custom CSS.

I ONLY WANT THIS ON MOBILE!

You can check it here: https://1049xn-ya.myshopify.com/products/editing-masterclass

(And you’ll find the email sign-up section all the way at the bottom here: https://1049xn-ya.myshopify.com/ )

Thanks a lot,
Tim

[BlackUmbrella]

You just need to add some padding-left and padding-right to your image section and apply only to mobile. In your case, less than 750px.

[CreatorTim]

Hey, could you please provide me with the code for this?

[DaisyVo]

Hi @CreatorTim

In order to fulfill your request, please follow these steps
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above

{% style %}
@media screen and (max-width: 768px){
.product__description.rte.quick-add-hidden,
.page-width > .image-with-text,
.newsletter__wrapper {
    width: calc(100% - 4rem / var(--font-body-scale));
    margin-inline: auto !important;
}
}
{% endstyle %}

Here is the result:

I hope this helps

Best,

Daisy

[CreatorTim]

Hey, it only adjusted the image width. I want to expand all the text everywhere to match the same width as the Rich Text section.

How can I do that?

You can check it how it looks here: https://1049xn-ya.myshopify.com/products/editing-masterclass

Thanks a lot,
Tim