Create different version of a mobile and web for images

Nuccy
Tourist
9 0 0

Hello,

I am working on my website with the minimal theme, vintage style.

I'd like to have different size image for my computer version and my mobile version. I've tried solutions found on other discussions but it does not seem to work and i am not sure where the put the codes I've seen.

Can anyone help ?

If I understand correctly, there is a way to create the option of choosing an image for the web version and one for the mobile version. 

Thanks in advance for your help !!!

0 Likes
bdowling
Explorer
66 13 34

Hi, generally this takes using two different image elements. A bigger one on desktop that css hides on mobile, and a smaller one on mobile that css hides on desktop.

If you share specifically what on the theme you want to have display differently, I can give a solution with the Liquid code.

0 Likes
Nuccy
Tourist
9 0 0

Hello,

Ok yes that's what I understood but did not know how to implement. I'd like to display slides of images and gallery as well differently.

Thanks so much!

0 Likes
bdowling
Explorer
66 13 34

Specifically which images? There’s a lot in the theme

0 Likes
Nuccy
Tourist
9 0 0

I’m not sure how to name them ?

The ones that are on the home page which I chose from my own personal library. 

Does that help ?

0 Likes
bdowling
Explorer
66 13 34

If you can determine the element (they may be talking about one you want to change), you can apply this post’s solution: https://community.shopify.com/c/Shopify-Design/Minimal-Theme-Hide-homepage-slider-image-in-mobile/td...
to the element you want to conditionally apply css to.

 

edit: it’s not marked as the solution but it’s the second post down. 

0 Likes
bdowling
Explorer
66 13 34

If you only want to change the height of the image in the slideshow on the front page, you'd just need to edit the slider height in your store editor. No need to write any code that way.

this theme makes it tricky to just go ahead and change the image sizing in the slide show so I’d have to know more specifically how you want them resized?

0 Likes
Nuccy
Tourist
9 0 0

Hello,

Ok thank you I had a look at this but it just deleted the slide instead of resizing it for the mobile version.

On my computer, the slides are 1281 x 399px and I wanted them to be 364x272px on my mobile, or be able to choose different ones for mobile and web.

Does that make sense?

Thanks for your help!

0 Likes