Changing how my hero image displays while viewing on mobile

Store Design
1

Hello there!

Currently, my site (https://lapp-structures.myshopify.com/) features a large hero image of a home with matching shed. It looks great on desktop, but when you view it on mobile the image simply zooms in and the shed is cropped out.

Is there any way I can change this so that the shed in the photo is more visible when viewing on a majority of mobile devices?

shopify banner.jpg
shopify banner.jpg1920×887 248 KB

Desktop version

shopify banner mobile.jpg
shopify banner mobile.jpg486×713 60.8 KB

How it currently displays on mobile. Would like shed portion to be centered if possible.

2

Hello @rdevine7985 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file

Add this following code at the bottom of page:

@media (max-width: 767px) {
  .hero-image {
    background-position: center;
  }
}

Save and preview

Hope this can help.

Transcy

3

I followed your steps, but I’m not seeing a change on my end. Appreciate the help though!