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

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