Empire Theme - How to make the background image of Image with text section full width?

[dtffox]

https://vinylfoxusa.com/pages/ranger

Password- VINYL2023!

I would like to make the background image cover the full width and the height stay the same height it is now.

Thank you in advance.

[BSSCommerce-HDL · Accepted solution]

Hi @dtffox, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.shopify-section.pxs-image-with-text-section {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

@dtffox,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#shopify-section-template--16186807451727__pxs_image_with_text_overlay_pT46Vp {
  padding: 0!important;
  margin-left: 0!important;
  margin-right:0 !important;
  max-width: 100%!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😍

[BSSCommerce-B2B · Accepted solution]

@dtffox, change the code like this, it will apply for two pages

<style>
.shopify-section.pxs-image-with-text-section {
     padding: 0!important;
     margin-left: 0!important;
     margin-right:0 !important;
     max-width: 100%!important
}
</style>

 Result:

[BSSCommerce-B2B]

@dtffox , your password is wrong. Can you provide it again?

[BSSCommerce-B2B · Accepted solution]

@dtffox,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#shopify-section-template--16186807451727__pxs_image_with_text_overlay_pT46Vp {
  padding: 0!important;
  margin-left: 0!important;
  margin-right:0 !important;
  max-width: 100%!important
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😍

[dtffox]

Thank you very much. Worked perfectly!

[BSSCommerce-B2B]

@dtffox , glad to help you 😊

[dtffox]

That worked perfect. Now I have another request for the image at the top of the contact page. I would like it to be full width as well.

https://vinylfoxusa.com/pages/contact

Password - VINYL2024

Thank you in advance!

[BSSCommerce-B2B · Accepted solution]

@dtffox, change the code like this, it will apply for two pages

<style>
.shopify-section.pxs-image-with-text-section {
     padding: 0!important;
     margin-left: 0!important;
     margin-right:0 !important;
     max-width: 100%!important
}
</style>

 Result:

[dtffox · Accepted solution]

Thank you so much!

[BSSCommerce-HDL · Accepted solution]

Hi @dtffox, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.shopify-section.pxs-image-with-text-section {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍