How to change image banner size for mobile

Store Design
, ,
1

I’m currently using the studio theme. The banner on my desktop is size large, but on the mobile version its a square. How can I make the image taller for just mobile version?

IMG_4832.jpg
IMG_4832.jpg828×1792 144 KB

2

Hello @smander

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

@GemPages thanks, no password

https://fleurelleflowers.myshopify.com/

4

Hi @smander

This is Victor 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 screen and (max-width: 767px){

div#Banner-template–17308519792962__e74e184d-f9be-4238-99f4-84a8f952befa .banner__media.media{

height: 600px !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

5

Hi @smander ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px){
#Banner-template--17308519792962__e74e184d-f9be-4238-99f4-84a8f952befa .banner__media {
    height: 50rem !important;
}
}

Hope it helps!

6

@PageFly-Victor Thanks, this worked!

1 Like
7

Hi @smander ,

Great! I’m glad it works well on your end :blush:

8

Hi there, I am trying to make it so my whole banner can be seen on a mobile device too but my theme doesn’t have the file base.css. I am using the theme " prestige" Does this mean I don’t have this option?

9

Doesn’t work for me I am using dawn them. I have my banner height set to “large”. Looks good on desktop but want it to cover entire screen on mobile rather than having a square image.

Thanks.