How can i inccrease text width.

Store Design

Topic summary

A user seeks to make text span the full width of their Shopify store page, noting unused space on the right side.

Solutions Provided:

  • Multiple developers suggest adding CSS code to the text-overlay.css file
  • Initial code targets .max-w-text-large class with max-width: 100% !important for screens wider than 1024px

Root Cause Identified:

  • Another contributor identifies that <br> tags are forcing line breaks, preventing full-width display
  • Requests screenshot and details about how the code was implemented

Updated Solution:

  • Revised CSS code provided that both sets max-width to 100% and hides <br> tags within the text element using display: none
  • Targets screens 767px and wider

Status:

  • Initial attempt reported as “not working”
  • Final resolution unclear - last message asks if the updated code solved the issue but receives no confirmed response
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi i want below text take full width. on right side there is space

hem0903_0-1734862349144.png
hem0903_0-1734862349144.png1898×305 26.1 KB

store url - https://e68fa2-2b.myshopify.com/pages/privacy-policy

2

Hello @hem0903 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your text-overlay.css file and paste the following code at the bottom:

@media (min-width: 1024px) {
    .max-w-text-large {
        max-width: 100% !important;
    }
}

Regards
Guleria

3

Please paste this code in the end of text-overlay.css file.

@media (min-width: 1024px) {
    .max-w-text-large {
        max-width: 100% !important;
    }
}
@media (min-width: 769px) {
    .max-w-text-large {
        max-width: 100% !important;
    }
}
@media (min-width: 1024px) {
    .max-w-text-large {
        max-width: 100% !important;
    }
}
4

not working

5

HI @hem0903

This issue is caused by the
tag, which forces the text to break into a new line. For example, in the section below where there is no
tag, the text spans the full width.

Please let me know where and how you added this code. Take a screenshot and share it with me so I can take a look.

DaisyVo_0-1734865804964.png
DaisyVo_0-1734865804964.png802×367 110 KB

DaisyVo_1-1734865814880.png
DaisyVo_1-1734865814880.png792×335 92.7 KB

I hope this helps

Best,

Daisy

6

Please use tis updated code.

@media (min-width: 767px) {
    .max-w-text-large {
        max-width: 100% !important;
    }
.max-w-text-large br {
    display: none;
}
}

Regards
Guleria

7

it’s solved on not?