How Do I Reduce The Height Of The Image Banner On The Desktop Version Of My Website?

[MuggedByBritt]

Hello,

How do I reduce the height of the image banner on the desktop version of my website? I’ve tried using codes from previous posts of people who’ve experienced similar issues, but unfortunately, none of the solutions that I’ve tried have worked. Any help would be greatly appreciated.

[PaulNewton]

Hi @MuggedByBritt Other people are not mind readers

READ: https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/2254458

Provide critical detail upfront like publicly inspectable urls, theme name, and or storefront password.

If you references something like a post, then link to it.

When seeking aid always keep in mind others don’t magically have access to what you experience.

You must communicate, don’t make others have to dig it out of you.

Lack of effort in communication is a massive indicator of future business failure from wasting time and money don’t make a habit of it.

[MuggedByBritt]

Hello Paul,

Thank you for your reply. My website address is: MuggedByBritt.com. I’m using Dawn theme 15.0.0. I would like for the image banner on my homepage to be the height of the medium banner option (I currently have the “Adapt To First Image” option selected) but selecting that option changes the width and also changes the image banner size on my mobile version. Please advise.

[PaulNewton]

Search with the problems keywords and theme name there should be css bandaids that only impact performane a bit.

https://community.shopify.com/c/forums/searchpage/tab/message?advanced=false&allow_punctuation=false&filter=location&location=forum-board:ecommerce-design&q=dawn%20banner%20size

Or just literally reduce the height of the image itself.

Otherwise changing settings behavior in a theme is an advanced theme customization.

Merchants that need such customization can contact me for services.
Contact info in forum signature below .
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[namphan]

Hi @MuggedByBritt ,

Please go to Customize > Sections > Image banner > Custom CSS and add code:

@media screen and (min-width: 750px) {
   .banner::before, 
   .banner .banner__media::before {
        padding-bottom: 40% !important;
    }
    .banner .media > img {
            object-fit: cover !important;
    }
}

[MuggedByBritt]

Hi Namphan,

Thank you so much for providing the code, I really appreciate it. Is there anything I can do to get the full image to show? Unfortunately, the top and bottom of the image is cut off per my screenshot below:

[namphan]

Hi @MuggedByBritt ,

If you want to display the whole image, the image will not display full width, refer to:

Or I recommend you add option to display separate image for desktop, it will help everything display better

[MuggedByBritt]

Hello @Namphan,

Thank you for your advisement. The image size is perfect for mobile, so I would like to continue using it for the mobile version of my website, while changing the height of the image for the desktop version of my site (which would require using the option to display a separate image for desktop like you said). The code that you provided is the size that I would like for my desktop image banner without the image being cut. Do you happen to know of any good photo editing websites or programs where I can make adjustments to the height while maintaining the width without compromising the quality of the image? Or is more advanced customization my only option besides using a completely different photo?

[namphan]

Hi @MuggedByBritt,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (min-width: 990px) {
#Banner-template--25140570587443__image_banner_NAPkzF {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
}

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

[MuggedByBritt]

Thank you! This is the smallest I’ve been able to get my image without compromising the quality!