Adjusting desktop collection image to fit mobile screen automatically

Store Design
1

I am using the DEBUT theme. I am trying to get the desktop default collection photo to fit/display correctly automatically on the mobile version of my site. I have tried other solutions for this problem, but cant get them to work.

The link to the page is https://nostalgia.ltd/collections/vintage-rap-t-shirt

Any help is SO much appreciated.

Best.

1 Like
2

Hello, @nostalgiaLTD

Thanks

can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
.collection-hero__image {
    height: auto;
    background-size: contain;
}
}
1 Like
3

thank you! it worked

1 Like
4

@daliasabet

thanks for update

it’s my pleasure to help us

5

Hello can you help me adjust my Shopify desktop theme to fit mobile view as well?

1 Like
6

@SplashedByPinkz

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
7

https://splashedbypinkz.com
password Pinkz

1 Like
8

@SplashedByPinkz

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-hero-1 .hero--large {
    height: 190px;
}
}
1 Like
9

Wait so it only work 5secs

10

it worked for the top image not the bottom

1 Like
11

@SplashedByPinkz

yes please try this code

@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--large {
    height: 200px;
}
}
12

thank you so muchhhhh

1 Like
13

@SplashedByPinkz

it my pleasure to help us

14

Can you do my site as well?

15

Hello @KetanKumar ,

Can you please assist me. I can’t seem to figure it out.

www.shopgrace-boutique.com

password: ShopGrace

The image says *Fee Bottle on Orders Over $65.

Thank you!

1 Like
16

@SHOPGRACE

possible this look at mobile please confirm

KetanKumar_0-1637124129495.png
KetanKumar_0-1637124129495.png1920×1080 316 KB

17

@KetanKumar

Yes that is the image I’m having trouble with. I see that in the mobile version it might not look good.

What do yo recommend?

Should I just paste that code to make it look the way you made it or is there another solution?

1 Like
18

@SHOPGRACE

yes please change image size

19

I’m in need of some help as well. Unable to get the collection images to resize automatically in mobile view. Here is a link to one of the images on mobile view. https://1982candleco.com/collections/the-midnight-collection

20

Hi @KetanKumar

Can you please help me,

This is my site: https://eltemplodelamoda.com/

I can´t adjust the size image of the collections on mobile and pc,

What do you recommend ?

Thanks a lot