Why aren't my collection banners displaying in full width after theme update?

Store Design
, , , ,

Topic summary

After a theme update, collection banner images stopped displaying full-width on both mobile and desktop. Previous behavior showed edge‑to‑edge banners; two screenshots illustrate the change, and a live collection URL was provided for reference.

Tried fixes included:

  • Custom CSS on the wrapper: .collection__image-wrapper { max-width: 100% !important; }
  • Alignment tweak: .collection__image-wrapper { align-content: center; }
  • Theme customization “Image Size” options (including Original Image Size Ratio). None resolved the issue.

Solution provided:

  • Apply CSS targeting the image inside the wrapper so it scales to the container width: set the image’s width to 100% (e.g., .collection__image-wrapper img { width: 100%; }).

Outcome:

  • This CSS change restored full-width display on both mobile and desktop. The original poster confirmed it works.

Status: Resolved. No further actions or open questions noted. Images were central to understanding the visual regression.

Summarized with AI on January 8. AI used: gpt-5.
1

Hello All,

I would like to find out why these collection banners are not displaying in Full Width as they used to before updating to a new version of this theme a few days ago.

I have tried many different lines of css such as:

.collection__image-wrapper{

max-width: 100% !important;
}

and have also tried this as a last resort since the image would not span the full width properly:

.collection__image-wrapper{

align-content: center;
}

I have also gone into the customisation settings and tried all types of “Image Size” (it is currently on “Original Image Size Ratio”), but nothing seems to work.

Before the update, the collection banner used to display properly on both Mobile & Desktop. The screenshot below can be seen for reference

Full Width Collection Banner.png
Full Width Collection Banner.png1903Ă—952 291 KB

This is what it looks like now

Full Width Collection Banner Missing.png
Full Width Collection Banner Missing.png1913Ă—948 307 KB

Would anyone be able to help with this issue on making the collection banners the same width as the original image again?

The website can be found here:

https://toptoys2u.co.uk/collections/toys-for-5

I appreciate any help.

2

Use this css

.collection__image-wrapper img {
    width: 100%;
}
1 Like
3

Hi @Guleria

Thank you very much for your help, this looks like it has worked for both mobile and desktop too!

Kind Regards

1 Like