How to change rich text and image banner blocks to full width on mobile only?

[trebag]

A while ago I changed something somewhere in the code that made the rich text block width limited (see image).
I want this to be full width on mobile but I cannot find where to change this in the code.

I also want to change the image banner further down on the page to full width.

Any ideas?

Site is: https://haget.co/products/haget-swim-shorts

[niraj_patel · Accepted solution]

Hello @trebag 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px) {
   section#shopify-section-template--18570346791255__7ee9fa8b-f478-4b4c-938c-f026b7f5aa98 {
      padding-left: unset !important;
      padding-right: unset !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Rajvi__patel]

@trebag do you want to show like this ?

or remove white side space ?

[trebag]

Sorry for the confusion. I want to remove the side white space and make it full width. Same thing with the image banner a bit down on the page.

[Rajvi__patel]

@trebag Add below css in your main css file

.rich-text__wrapper.rich-text__wrapper--center {
    margin: 0px !important;
    justify-content: center;
    min-width: 100%;
}
isolate {
    padding: 0px;
}

Add below css in you customizer section 
.shopify-section{
  padding: 0px !important;
}

[trebag]

Changed the code file which made the text go further out but the blue container is still fixed.

Not possible to add that to the custom CSS in editor:

[niraj_patel · Accepted solution]

Hello @trebag 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px) {
   section#shopify-section-template--18570346791255__7ee9fa8b-f478-4b4c-938c-f026b7f5aa98 {
      padding-left: unset !important;
      padding-right: unset !important;
   }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[trebag]

Thanks a lot! 

[niraj_patel]

Welcome @trebag 😁
Was my reply helpful? Click Like to let me know!

[trebag]

Btw, to add this to more sections, do I need to do it for all of them separately, or can I just add more sections to the same code? Like:

<style>
@media screen and (max-width: 767px) {
   section#shopify-section-template--18570346791255__7ee9fa8b-f478-4b4c-938c-f026b7f5aa98 & shopify-section-template--2389472378942__7sd737fs7yvjskljsij832{
      padding-left: unset !important;
      padding-right: unset !important;
   }
}
</style>

[niraj_patel · Accepted solution]

<style>
@media screen and (max-width: 767px) {
   section#shopify-section-template--18570346791255__7ee9fa8b-f478-4b4c-938c-f026b7f5aa98,
   section#shopify-section-template--2389472378942__7sd737fs7yvjskljsij832 {
          padding-left: unset !important;
          padding-right: unset !important;
    }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[niraj_patel]

Was your question answered? Mark it as an Accepted Solution.
Thanks😁