Make all "Image with Text" blocks full width on Trade Theme

Solved

Make all "Image with Text" blocks full width on Trade Theme

letsgetwasted
Excursionist
38 1 7

Hello!

 

I'm trying to make all my Image with Text blocks full width, but still keeping the padding on the side. I only want this to affect the Image with Text sections (across entire site), but not other things like the header or footer.

 

How it looks now:

Screenshot 2024-06-19 at 10.26.22 AM.pngScreenshot 2024-06-19 at 10.26.34 AM.png

 

How I want it to look:

Screenshot 2024-06-19 at 10.27.28 AM.png

 

Appreciate any help, thank you!

 

Shopify URL: https://65a186-44.myshopify.com/

Password: meerew

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4394 1005 1657

This is an accepted solution.

Hi @letsgetwasted 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.shopify-section:has(.image-with-text) .page-width {
    max-width: 100%;
    width: 100%;
}
</style>

PageFlyRichard_0-1718768081967.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

Guleria
Shopify Partner
3147 616 882

Hello @letsgetwasted ,

 

Can you add a class name in section -> image_with_text.liquid first/parent div ? ( class name can be anything like parent-img-cont ) 
Once you add it then I can provide css solution which will work across entire site.

Thanks
 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
letsgetwasted
Excursionist
38 1 7

Hi @Guleria,

 

Do you mind clarifying exactly what code to add and where?

PageFly-Richard
Shopify Partner
4394 1005 1657

This is an accepted solution.

Hi @letsgetwasted 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.shopify-section:has(.image-with-text) .page-width {
    max-width: 100%;
    width: 100%;
}
</style>

PageFlyRichard_0-1718768081967.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

letsgetwasted
Excursionist
38 1 7

Perfect, thank you!

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Hi @letsgetwasted 

Please add this code to theme.liquid file after <head>

<style>
.page-width:has(.image-with-text) { max-width: 100% !important; }
</style>

 

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

iCart_App
Shopify Partner
580 58 107

Hello @letsgetwasted,

You can try this code: it might be helpful to you- 

Navigate to the Online Store-> Theme-> Edit code-> Assets> base.css -> add below the code(bottom).

.section-template--15251938967607__image_with_text_9w6Tfz-padding .page-width {
    width: 100%;
    max-width: 100%;
}

 

iCart Cart Drawer Cart Upsell App


- If you find the solution helpful, please accept and like it
- To learn more visit www.identixweb.com