How can I make my hero image responsive on all screen sizes?

[vlad-k]

Hello,

I am trying to make my hero image responsive. I’ve tried browsing through the boards, but couldn’t find a solution. I don’t only want it to be responsive on mobile, it has to be regardless of screen size.

So far I’ve tried adding a focal point to the image, and also adding this code to base.css (just copied it from a thread with a similar issue):

@media only screen and (max-width: 600px) {
#Hero-1607640974dd4d6129 {
background-size: contain;
}
}

#shopify-section-1607640974dd4d6129 .hero .hero__inner {padding: 0;}

I am running Crave theme.

URL: https://konservaria.myshopify.com/

pass: tootho

Anyone else had this issue and solved it?

Thanks!

[dmwwebartisan]

@vlad-k

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px){
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {height: 17rem !important;}
.banner__media.media>img {object-fit: contain !important;}
}

Thanks!

[vlad-k]

Hello and thank you for your support.

Unfortunately this didn’t really solve the issue.

• on a larger desktop display, the header now is really tiny and the hero image is cut a lot from its height

• on a notebook display, the logo in the header doesn’t show up and the hero image is being cut a bit

• on mobile it looks much better, but it is not full width

I am attaching two screenshots, the first is from a desktop and the second from a notebook.

[vlad-k]

LE: The desktop header now looks normal, but still got the other issues

[Made4uo-Ribe]

Hi @vlad-k ,

Thank you for the coffee. 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:
4. And Save.

.banner__media.media.scroll-trigger.animate--fade-in img {
    width: 100%;
    height: inherit;
    object-fit: unset !important;
}

Result:

Desktop

Mobile.

I hope it help.

[vlad-k]

Hey,

Thanks for the help.

Unfortunately, even if this solution solved the image cutting issue, it still wasn’t responsive as it’s distorting.

I figured it was a setting in the builder:

Banner height

Adapt to first image

[Made4uo-Ribe]

Yes, I try that also. But I go on other way.