How can I adjust the banner image to fit on mobile view?

Store Design
1

Hi all!

I am working on my website. And having issues with the banner image. I selected “large” for layout. It looks great on my desktop. But on the mobile, part of the right hand side and left hand side of image is cut off. I want the entire image to show on mobile just like it is on desktop. How do I adjust it so on mobile, the entire image is shown?

I appreciate any help you can provide.

My website is www.PennsylvaniaParks.org

Thank you!

2

Hi @Justin34

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.banner__media img {

object-fit: contain !important;

}

.banner__media.media {

height: 23rem !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Solution:

You’re going to change image-fit to ‘contain’

There after, you are left with a grey background, simply adjust opacity according to your desires. The lower the number, the less visible…

See instructions below…

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code

  2. In the Asset folder, open the base.css

  3. Paste the code below at the very bottom of the file.

.media {
    display: block;
    background-color: rgba(var(--color-foreground),0.01) !important;
    position: relative;
    overflow: hidden;
}
.media>img {
    object-fit: contain !important;
    object-position: center center;
    transition: opacity .4s cubic-bezier(.25,.46,.45,.94);
}
4

Neither of the solutions provided on this page worked for our website. Does someone else have another option?