How can I adjust my banner photo for optimal mobile and desktop view?

Store Design

Topic summary

A Shopify store owner using the Refresh theme is experiencing banner image display issues on their homepage. The main problems are:

Mobile view: The model’s head is being cut off; the image needs to shift left.

Desktop view: The image is too zoomed in, cropping out both the product and model’s head at top and bottom.

Solutions provided:

Two community helpers offered CSS code snippets to add to the base.css file:

  • One solution successfully fixed the mobile view using object-position: right targeting the specific banner section ID
  • Desktop issues persist despite multiple code attempts involving min-height adjustments and object-position properties

Current status: The mobile display is resolved, but the desktop banner remains cropped. The latest suggestion involves setting min-height: 66vw on the banner content to display the full-size image. The issue remains ongoing as the store owner continues seeking a working desktop solution.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Refresh theme

https://hothugger.com/

Please can someone help me fix the view of my banner photo on the landing page.

Mobile- image needs to be moved to the left so models head isn’t chopped off

Desktop - image zoomed out so the model and product are visible

Thanks Finn

Screenshot 2022-11-04 at 00.26.56.png
Screenshot 2022-11-04 at 00.26.56.png1286×992 119 KB

Screenshot 2022-11-04 at 00.27.06.png
Screenshot 2022-11-04 at 00.27.06.png2700×1380 359 KB

2

Hello @Finn4 ,

Go to online store >> edit code >> add this css bottom of base.css file

@media screen and (min-width: 750px){
.banner–medium:not(.banner–adapt) {
min-height: 75rem;
}
}
@media(min-width : 280px) and (max-width : 767px){
#shopify-section-template–16646327337216__1661331420f2bc857b .media > img {
object-position: right !important;
}
}

3

hi @Finn4

Try to add this code at the bottom of Theme Editor > assets > base.css

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

Try it and let me know

4

It has resolved the mobile view but not the desktop view. can you send me the code for the desktop code please. ( need it on the desktop to zoom out so can see product and models head)

5

It has resolved the mobile view but not the desktop view. can you send me the code for the desktop code please. ( need it on the desktop to zoom out so can see product and models head)

Thanks Finn

6

@Finn4 ,

Go to online store >> edit code >> add this css bottom of base.css file

@media screen and (min-width: 750px){
.banner–medium:not(.banner–adapt) {
min-height: 75rem;
}
}
@media(min-width : 280px) and (max-width : 767px){
#shopify-section-template–16646327337216__1661331420f2bc857b .media > img {
object-position: right !important;
}
}

7

Thanks for getting back to me. However this has still not resolved the desktop view. The banner is still chopped off at the bottom and top.

8

Hi @Finn4 If you want to image display full size,

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

Banner-template--16646327337216__1661331420f2bc857b,
#Banner-template--16646327337216__1661331420f2bc857b .banner__content {
  min-height: 66vw;
}