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

[JH_TECH]

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 the current appearance and the desired one to help you understand this more accuratelly.

Thank you for your time,

Jacques Hermes Team

[niraj_patel · Accepted solution]

@JH_TECH 

Add this

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
.collection-hero__description {
max-width: 100% !important;
}
}
.collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
padding: unset !important;
max-width: 100% !important;
}
.collection-hero__inner .rte img {
width: 100% !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.collection-hero h1.collection-hero__title {
display: none !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSS-TekLabs]

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?

[JH_TECH]

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 code etc) manually.

Thank you for your time,

Jacques Hermes team

[BSS-TekLabs]

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

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
  .collection-hero__description {
       max-width: 100% !important;
   }
 }
  .collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
       padding: unset !important;
       max-width: 100% !important;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[JH_TECH]

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

[niraj_patel · Accepted solution]

@JH_TECH 

Add this

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
.collection-hero__description {
max-width: 100% !important;
}
}
.collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
padding: unset !important;
max-width: 100% !important;
}
.collection-hero__inner .rte img {
width: 100% !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[JH_TECH]

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 remove the title it does not let us save the changes. Is there any other way to achieve this? 

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.collection-hero h1.collection-hero__title {
display: none !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[JH_TECH]

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! 

[niraj_patel · Accepted solution]

@JH_TECH Add This

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .collection-hero__title+.collection-hero__description {
        margin-top: unset !important;
  }
</style>
Please:
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it my both solutions as an Accepted Solution.

[JH_TECH]

Thank you once again! This code solved that problem. We would like to thank you for all the solutions you provided for our page problems and wish you to have a great day! 

Thank you for your time, 

Jacques Hermes team

[niraj_patel]

Welcome @JH_TECH 🤗

[BSSCommerce-B2B]

Could you share the website URL and password if available?