Solved

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

trebag
Tourist
7 0 0

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

 

Accepted Solutions (2)

techlyser_web
Shopify Partner
1423 268 282

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

techlyser_web
Shopify Partner
1423 268 282

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 10 (10)

Rajvi__patel
Shopify Partner
61 4 14

@trebag do you want to show like this ?

Rajvi__patel_0-1709128338443.png

or remove white side space ?

If helpful then please Like and Accept Solution.
trebag
Tourist
7 0 0

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
Shopify Partner
61 4 14

@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

 

 

If helpful then please Like and Accept Solution.
trebag
Tourist
7 0 0

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

 

techlyser_web
Shopify Partner
1423 268 282

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
trebag
Tourist
7 0 0

Thanks a lot! 

techlyser_web
Shopify Partner
1423 268 282

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
trebag
Tourist
7 0 0

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>

techlyser_web
Shopify Partner
1423 268 282

This is an 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_web
Shopify Partner
1423 268 282

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com