New Shopify Certification now available: Liquid Storefronts for Theme Developers

Make Image with Text Background Colour Full Width - Dawn 11

Solved
ed_bb
Excursionist
33 0 0

Hi,

 

Looking to try and make the background colour of Image with Text section in Dawn 11 theme be full width of page but leave the rest of the section design as is.

 

Found a few "solutions" online but it stretches the full section the width of the page making text and images more spread out.

 

I simply want to make the background colour the full width of the page.

 

Thanks.

Accepted Solution (1)
codexecom
Shopify Partner
41 6 6

This is an accepted solution.

Hey @ed_bb 

please try this code in base.css file at last
     .shopify-section.section:has(.image-with-text) {
            background: #f3f3f3 !important;
     }


This is color code "#f3f3f3"  you change it . you can use color code or color name both.

Need Shopify Developer,Designer
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I

View solution in original post

Replies 5 (5)
codexecom
Shopify Partner
41 6 6

Hi @ed_bb 
Please share store url and one screenshot where you want these changes i will definetly help you

Need Shopify Developer,Designer
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
ed_bb
Excursionist
33 0 0

Hi @codexecom 

Store url is baileybespoke.co.uk

Homepage section where it talks about custom orders is where I would like to make the change.

 

Thanks.

codexecom
Shopify Partner
41 6 6

This is an accepted solution.

Hey @ed_bb 

please try this code in base.css file at last
     .shopify-section.section:has(.image-with-text) {
            background: #f3f3f3 !important;
     }


This is color code "#f3f3f3"  you change it . you can use color code or color name both.

Need Shopify Developer,Designer
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
PageFly-Richard
Shopify Partner
3678 807 1455

Hi @ed_bb 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--19618705965399__ef5b6a8f-e541-4f60-9d8c-a913a27574d2-padding.scroll-trigger.animate--slide-in {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

Hope you find my answer helpful!
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.

ed_bb
Excursionist
33 0 0

Hi @PageFly-Richard 

 

Thank you for your reply however unfortunately, that code stretches the entire section across the page making the image and text wider.

 

I just want to be able to make the background colour go full width but leaving image and text exactly as they currently are.

 

Are you able to assist further?

 

Thanks.