img mobile full width

Site URL: https://www.johan.media/shop/p/himmeltinden

Hi!

I'd like to have portrait image in full width on mobile size only

Here's my code to crop the image

.ProductItem-gallery-slides-item-image {
  object-fit: contain!important;
  width: 100% !important;
}

Now I wonder how I can make the div ="ProductItem-gallery-slides-item" to fit the image size in it.

Any idea?

I'd like to extend the code to other part of the website to have portrait image in full width on mobile size everywhere like here: https://www.johan.media/journal/right-before-the-pandemic-hit

Would love to have any input, thanks 🙂 

Try adding to Design > Custom CSS

.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

@tuanphan

Thanks for the reply! 🙂 

Nope, I wonder if we can play with the flex or something? This goes beyond my html knowledge.

Do you know?