FROM CACHE - en_header

Banner Size On Desktop

Finn4
Explorer
100 0 10

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

Replies 9 (9)
ExpertRookie
Shopify Partner
1512 246 281

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;
}
}


 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
Finn4
Explorer
100 0 10

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 

PageFly-Richard
Shopify Partner
2116 380 1057

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

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.

Finn4
Explorer
100 0 10

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

Ujjaval
Shopify Partner
603 101 79

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 !!!

Finn4
Explorer
100 0 10

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

Finn4
Explorer
100 0 10

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

ExpertRookie
Shopify Partner
1512 246 281

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

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
PageFly-Richard
Shopify Partner
2116 380 1057

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

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.