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

letsgetwasted · ‎06-18-2024

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:

How I want it to look:

Appreciate any help, thank you!

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

Password: meerew

PageFly-Richard · ‎06-18-2024

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>

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!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

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

View solution in original post

Guleria · ‎06-18-2024

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

letsgetwasted · ‎06-18-2024

Hi @Guleria,

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

PageFly-Richard · ‎06-18-2024

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>

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!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

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

letsgetwasted · ‎06-19-2024

Perfect, thank you!

Dan-From-Ryviu · ‎06-18-2024

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

binal_identix · ‎06-18-2024

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

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

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

Community Blog Articles