How to adjust banner size for better desktop view?

Store Design
1

The banner view on the desktop cuts off half the photo. Can you give me the code so the image is less zoomed in so you can see more of what is going on in the image on the desktop view? The mobile view is perfect how it is.

Refresh Theme

https://hothugger.com/

Screenshot 2022-11-14 at 09.21.06.png
Screenshot 2022-11-14 at 09.21.06.png2880×1800 524 KB

2

Hi @Finn4

You can try follow this path:
Themes => edit code => asset => section-image-banner.css
and add this code to bottom of the file section-image-banner.css

@media screen and (min-width: 750px){
.banner--medium:not(.banner--adapt) {
  min-height: 66.6666vw;
}
}
3

Hi ExpertRookie,

This didn’t work. I already have some code in place to get it looking right on mobile. Maybe this stopped it. here is the mobile code.

@media screen and (max-width: 990px){
#Banner-template–16646327337216__1661331420f2bc857b .banner__media > img{
object-position: center right;
}
}

I don’t want to change the mobile view. Just have the image on desktop zoom out so you can see the whole image at the current size.

Thanks Finn

4

Hi @Finn4

I’m Richard Nguyen - CRO Expert at PageFly, I’d like to suggest this idea:

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets → section-image-banner.css

@media screen and (min-width: 750px) {

.banner–medium:not(.banner–adapt) {

min-height: 66vw !important;

}

}

Hope you find my answer helpful!

Regards,

Richard-pagefly

5

Hi Richard, thanks for having a go.

Can I have it where the image stays the same size (medium banner height) but the image is less zoomed in on. THis code you have done makes the banner large banner height. Thanks Finn

6

Try below code hope it will be work for you:). Add this code into your custom css file .

@media screen and (min-width: 750px){
.banner--medium:not(.banner--adapt) {
    min-height: 84rem !important;
}
.banner__box {
       min-width: 91rem !important;
}
}

If you have any query regarding of it then feel free to ask .
It’s worked on me look below screenshot of it .

https://nimb.ws/210xrl

Thanks !!!

7

Hi, thanks for having a go.

Can I have it where the image stays the same size (medium banner height) but the image is less zoomed in on. THis code you have done makes the banner large banner height. Thanks Finn

8

Hi, thanks for having a go.

Can I have it where the image stays the same size (medium banner height) but the image is less zoomed in on. THis code you have done makes the banner large banner height. Thanks Fin

9

Hi @Finn4
I think you should resize your image to make it fit with the section size.

10

I see that your image is very large, so when adjusting the height or width the image will be cropped, I recommend you instead see the image with a more suitable size