Change size of 2nd and 3rd image in slideshow mobile view

Store Design
1

What code do I use to change the size of the 2nd and 3rd image of my slideshow, I like the way the 1st image fits. I’m speaking on mobile specifically, dawn theme. The home page, the slide show at the beginning at the top: jorgeisaacart.com

2

Hello @jorgeisaacart
This image right ?

devcoders_0-1743225086293.png
devcoders_0-1743225086293.png620×341 31.7 KB

3

that one and the 2nd image

4

Hello @jorgeisaacart

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 768px) {
.slideshow__media.media > img {
object-fit: cover;
object-position: top;
height: auto;
max-height: 100%;
}
}

devcoders_0-1743227613757.png
devcoders_0-1743227613757.png525×516 45.1 KB

5

Hi @jorgeisaacart

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check again

@media (max-width: 749px) {
#Slide-template--23241338454330__slideshow_Kf4wT4-2 .slideshow__media,
#Slide-template--23241338454330__slideshow_Kf4wT4-3 .slideshow__media { height: 53rem; }
}
6

Thank you, this one worked in part, but given the aspect ratio of the 2nd and 3rd photo, the “order new illustration” ends up being too below further down for the mobile viewer, I should have considered that, and that first image being a more square aspect ratio ends up having more space in the white container box where “order new illustration” goes. I appreciate you taking the time though.

7

This one worked, thanks. I had to crop the 2nd image so that it looks more centered, but it works in giving a more centered alignment to all 3 images in the same aspect ratio