Hello! I am encountering an issue working on the mobile section of my Dawn theme, which includes images of both landscape and portrait orientation. The sizing of the box appears to be set by the largest image in the set (portrait orientation) - See attachment 1 (landscape image) and 2 (portrait image). I have been able to set the box to the appropriate size (see attachment 3) using the following code:
@media screen and (max-width: 750px) {
#MediaGallery-template–16792868028659__main .slider__slide {
block-size: 300px !important;
}
}
However, while the size appears right I cannot get the image to object-fit: contain. Instead of object-fiting the box to the size I have set, the image is able to be expanded by swiping down on it. Is anyone able to help correct this behavior? Many thanks!
url: https://eggculture.com/
password: RF7cY9IDz1Cc1Hf
Attachment 1:
Attachment 2:
attachment 3:
I am able to fix the swipe by using overflow-y: hidden. Still require assistance with object-fit
Theme.liquid code:
@media screen and (max-width: 750px) {
#MediaGallery-template–16792868028659__main .media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
block-size: 350px !important;
object-fit: contain !important;
}
}
@media screen and (max-width: 750px){
#MediaGallery-template–16792868028659__main .global-media-settings {
border: none !important;
}
}
component-slider.css code:
@media screen and (max-width: 750px) {
#MediaGallery-template–16792868028659__main .slider__slide {
box-size: 350px !important;
display: inline-block !important;
margin-bottom: -325px !important;
}
}
replace # with your own unique IDs using web-inspector
Updated version that takes into account product media sets that do not contain pictures in portrait orientation:
theme.liquid
component-slider.css:
you will need to tweak the sizes to obtain the look you want but this is a baseline
