Page banner not taking 100% of the page's space

Store Design
, ,
1

Hello Shopify Community,

We want the banner of a particular page of ours (this one: https://jacqueshermes.com/pages/accessories) to take 100% of the space of the page (the one that appears when loaded, before the user scrolls down) and the title of the page to not be visible. Does anyone know 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. Also, please note that we want this customization to be local and not apply to the other pages of our site.

This is how the page looks like currently.
This is how the page looks like currently.1919×878 241 KB

This is the desired appearance of the page.
This is the desired appearance of the page.1919×881 199 KB

our page: jacqueshermes.com we use the Dawn theme (version 15.0.2)

Thank you for your time,

Jacques Hermes team

2

Hi @JH_TECH

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 989px){
.page-width.page-width--narrow.section-template--23410560532825__main-padding .rte div:nth-child(1) img {
    max-width: 100%; 
    width: 100% !important;
}

.page-width.page-width--narrow.section-template--23410560532825__main-padding {
    max-width: 100%;
}

.page-width.page-width--narrow.section-template--23410560532825__main-padding .rte div:not(:nth-child(1), .nodeview) {
    width: 60%;
   margin: auto;
}

.page-width.page-width--narrow.section-template--23410560532825__main-padding h1.main-page-title.page-title.h0 {
    text-align: center;
}

.nodeview p {
    max-width: 60%;
    margin: auto;
}
}

Note: This is not apply on the mobile screen.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hello @Made4uo-Ribe ,

The code you suggested makes the image take 100% of the space, but does not remove the page title as you can see on the screenshot bellow. We would like to remove the title and make the image take its place from the top of the page (bellow the menu)

JH_TECH_0-1728925827833.png
JH_TECH_0-1728925827833.png1919×878 309 KB

thank you for your reply,

Jacques Hermes team

4

Add this code then, same instruction.

.page-width.page-width--narrow.section-template--23410560532825__main-padding {
    padding-top: 0;
}

.page-width.page-width--narrow.section-template--23410560532825__main-padding .page-title {
    display: none;
}

And Save.

I also remove the title on the mobile screen.

Result:

Made4uoRibe_0-1728927017727.png
Made4uoRibe_0-1728927017727.png1604×555 804 KB

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

5

Go to Online Store > Themes. Click on the … and press Edit code.

Find main-page.liquid

Comment out the h1 like this.

{% comment %}# 
    {{ page.title | escape }}
  {% endcomment %}
6

Thank you for your reply! We’ve added the suggested code but the page does not change its appearance.

7

Thank you! The code you suggested fixed the problem! We would like to thank you for your contribution and wish you a pleasant day!