How to expand text width on mobile

CreatorTim · ‎01-13-2025

Hey, I need to expand the width of text on mobile.

I want all the text to have the same width as the images. I’ve already added code to theme.liquid that locks the width to the size I want, but it only works for the product description, rich text, and images. Now I want to apply it to the email sign-up text and the "image with text" section.

Here’s the code I used:

{% 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’s my store: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

Dan-From-Ryviu · ‎01-14-2025

Hi @CreatorTim

Please add this code to theme.liquid file, after <head> tag

@media (max-width: 749px) {
html .image-with-text__content { padding-left: 0 !important; padding-right: 0 !important; }
}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-14-2025

Hi @CreatorTim

Please add this code to theme.liquid file, after <head> tag

@media (max-width: 749px) {
html .image-with-text__content { padding-left: 0 !important; padding-right: 0 !important; }
}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

CreatorTim · ‎01-14-2025

Hey, thanks! Could you also provide me with the code to adjust the email sign-up section? I want to stretch the text and the containers to the full width, just like you did with the text earlier.

Here’s my store: https://1049xn-ya.myshopify.com/
(Just scroll all the way down to find the email sign-up section.)

Thanks a lot,
Tim

Dan-From-Ryviu · ‎01-14-2025

Please add this additional code.

html .newsletter__wrapper { 
    padding-left: 0;
    padding-right: 0;
}
html .newsletter__wrapper .newsletter__subheading { 
    max-width: 100rem; 
}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

How to expand text width on mobile

How to expand text width on mobile

Community Blog Articles