How can I adjust padding for full width text on any device?

[sincerelyjoie]

Hi there!

Looking to get some assistance with the padding on a section of my clients’ website. When the website is open at the max width, the text in the column doesn’t go from edge to edge. Is there anyway we can fix this code so that the body text fills the entire space regardless of what device they are on?

Template: Motion
https://copper-88-2022.myshopify.com/pages/the-science
Pass: Meashi

Any help is appreciated. Thank you so much!

[PageFly-Victor]

This is PageFly - Free Landing Page Builder.

You can add this code into the theme.css file

media only screen and (max-width: 600px){
.template-page .rte-setting.text-spacing {
 width: unset !important; 
}}

Hope this can help you solve the issue

Best regards,

PageFly

[sincerelyjoie]

Hello, thank you so much for your response. The code doesn’t work

The text does go edge to edge when the screen is at a smaller size but when its opened up the largest it still has quite a bit of padding.

Any other ideas? I appreciate your time!

[PageFly-Victor]

i can see it doesn’t go edge to edge because some of your styling from theme has blocked that

You can try this

media only screen and (max-width: 600px){
.template-page .rte-setting.text-spacing {
 width:700px !important; 
}}

[sincerelyjoie]

Thank you, this worked! I appreciate all your help.

[sincerelyjoie]

Sorry, one last thing… While that did work. It changes the spacing on another part of the science page right under ‘Our Brand Promise’. Is there anyway we can target the code by section?

[PageFly-Victor]

hi @sincerelyjoie sure to target the above section only, please use this code

media only screen and (max-width: 600px){
#shopify-section-template--15599183265951__1651177583213788be .template-page .rte-setting.text-spacing {
 width:700px !important; 
}}