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

Shopify Discussion

Topic summary

A user is experiencing sizing issues with the 2nd and 3rd images in their Dawn theme slideshow on mobile view. The first image displays correctly, but the subsequent images don’t match the desired fit.

Proposed Solution:

  • Use browser developer tools (F12) to inspect the slideshow elements and identify CSS classes/IDs
  • Target specific images using CSS selectors like :nth-child() or :nth-of-type()
  • Apply mobile-specific styling through media queries
  • Adjust width, height, and object-fit properties to control image scaling

Status: The issue remains open with one suggested approach provided but not yet confirmed as implemented or successful.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
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

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

You’re looking to target the second and third images of your slideshow on mobile specifically, using the Dawn theme. Here’s how you can achieve that with CSS:

Understanding the Challenge

The Dawn theme’s slideshow likely uses dynamic sizing to adapt to different screen sizes. This is usually good, but you want to override that behavior for the 2nd and 3rd images on mobile.

CSS Solution

  1. Inspect the Elements:

    • Open your website on a mobile device or use your browser’s developer tools (F12) and enable mobile device emulation.
    • Inspect the slideshow element and the individual images within it.
    • Identify the CSS classes or IDs associated with the slideshow, the image container, and the images themselves.
    • Note the HTML structure of the slideshow.

  2. Target the Images:

    • You’ll need to use CSS selectors to target the 2nd and 3rd images specifically.
    • You can use :nth-child() or :nth-of-type() CSS selectors to target these elements.

  3. Apply Mobile-Specific Styles:

    • Use a media query to apply the styles only on mobile devices.
    • Set the width and height properties of the images to the desired values.
    • You can also adjust other properties like object-fit to control how the images are scaled and cropped.

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly