Hello Shopify Community, We want to make our collections banner images take 100% of the width of the page like they used to in the past. We’ve tried multiple approaches but nothing seems to work. Does anyone how we can fix this? Any advise will be appreciated. Bellow we provide some screenshots of …

@JH_TECH Add this You can add code by following these steps Go to Online Store → Theme → Edit code. Open your theme.liquid file Paste the below code before on theme.liquid @media screen and (min-width: 750px) { .collection-hero__description { max-width: 100% !important; } } .collecti…

Hi @JH_TECH , Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?

You can add code by following these steps Go to Online Store → Theme → Edit code. Open your theme.liquid file Paste the below code before on theme.liquid @media screen and (min-width: 750px) { .collection-hero__description { max-width: 100% !important; } } .collection-hero__inner.page-…

Hello BSS-TekLabs, Our URL is: https://jacqueshermes.com/ A URL of a collection of ours: https://jacqueshermes.com/collections/jacketsovercoats Unfortunately we don’t have permission to share our passwords with other members of the community but we can provide you all the necessary details (theme…

Hello Niraj_patel, We’ve added the suggested code but still it does not take 100% of the width. Here’s a screenshot of the current appearance: [JH_TECH_0-1722353995247.png] Do you have any other suggestions on how this can be fixed? Thank you for your time, Jacques Hermes team

Could you please provide detailed information regarding the country or region where your store operates? This will enable our team to review it appropriately.

Thank you! This created the desired result! May we ask for another change we want to apply as well? We want the image to be the only thing visible before the products of the collection (we want the text title above to not be visible). If we go to the collection page from shopify admin, and try to re…

Could you share the website URL and password if available?

You can add code by following these steps Go to Online Store → Theme → Edit code. Open your theme.liquid file Paste the below code before on theme.liquid .collection-hero h1.collection-hero__title { display: none !important; } Was my reply helpful? Click Like to let me know! Was your…

Thank you this code did what we wanted. Now, one last thing regarding this, we would like to eliminate that blank space above the image. How we can do this? Bellow we provide screenshots with the current and the desired state. Once again, thank you so much for the usefull feedback! [JH_TECH_0-1722…

@JH_TECH Add This You can add code by following these steps Go to Online Store → Theme → Edit code. Open your theme.liquid file Paste the below code before on theme.liquid .collection-hero__title+.collection-hero__description { margin-top: unset !important; } Please: Was my reply he…

Collection page banner not taking 100% of the page's width

Store Design

JH_TECH July 30, 2024, 3:40pm 5

Hello Niraj_patel,

We’ve added the suggested code but still it does not take 100% of the width. Here’s a screenshot of the current appearance:

Do you have any other suggestions on how this can be fixed?

Thank you for your time,

Jacques Hermes team

Topic		Replies	Views
Collection banner image full width of screen - dawn theme Store Design design , shopify-themes	13	242	February 13, 2024
Collection page banner not taking 100% of the page's space Store Design design , customizations , troubleshooting	1	48	October 14, 2024
Place collection image above description & full width on the collection page - sense Store Design design , customizations , collection-page , css , shopify-themes , troubleshooting	5	78	April 24, 2023
Full width/height image banner for collections - DAWN THEME Store Design design , collection-page	2	89	November 9, 2022
Changed the collection image to full site witdh and it gets blurry Store Design design , collection-page	6	56	September 16, 2023

Collection page banner not taking 100% of the page's width

Related topics