How to make image with text full width on specific page?

Ask & Offer
, , , ,
1

I’m wondering how to make an image with text the full size of the page but only on specific pages?

Screenshot 2025-07-27 at 11.07.51 PM
Screenshot 2025-07-27 at 11.07.51 PM1920×542 58 KB

2

In Customize, go to this section settings, scroll down to “Custom CSS” and paste this:

.image-with-text.page-width {
  max-width: none;
  padding: 0;
}

Note that this will make your image a bit blurrier on wider screens.

3

Hi @smander,

Please go to Customize > Sections > image with text > Custom CSS and add code:

.image-with-text.page-width {
    max-width: 100%;
    padding: 0;
}

If I helped you, then a Like would be truly appreciated.

4

hey dear @smander follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like

<style>
{% if template == 'Home Page' %}
.image-with-text.image-with-text--no-overlap.page-width.isolate.collapse-corners.section-template--24953627607362__image_with_text_7chiDB-padding.aos-init.aos-animate {
    max-width: 100% !important;
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}
{% endif %}
</style>

image
image1267×901 60.5 KB

5

this worked but it also changed it on the main page, is it possible to only change it on the wedding page?

6

If you’ve used the “Custom CSS” in section settings, the code will apply only to this particular section.
However, code in “Theme Settings”=> “Custom CSS” or added in theme code inside <style>..</style> is not scoped and may apply to other elements.

7

Hi @smander,

Did you add the code in the Custom CSS section?

Screenshot
Screenshot794×1422 76.3 KB

When you add it to a section, it will only work for it and will not affect other sections