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

Store Design
, ,
1

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

trebag_0-1709126822120.png
trebag_0-1709126822120.png408×1040 43.6 KB

2

@trebag do you want to show like this ?

Rajvi__patel_0-1709128338443.png
Rajvi__patel_0-1709128338443.png327×799 35.2 KB

or remove white side space ?

3

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.

4

@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;
}

Rajvi__patel_0-1709128984954.png
Rajvi__patel_0-1709128984954.png318×818 31.5 KB

5

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:

trebag_0-1709129699771.png
trebag_0-1709129699771.png1471×1040 155 KB

6

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 on theme.liquid

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

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

7

Thanks a lot!

8

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

9

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:

@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; } }
10
@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; } }

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

11

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