How can I adjust mobile slideshow sizing in Spark theme?

Technical Q&A
1

Hello,

I am trying to get the photos in my mobile slideshow to size correctly. I am using the spark theme. I have already tried putting the below at the bottom of theme.liquid

@media screen and (max-width: 768px) {
.hero .hero__image { object-fit: fill !important;}
}

Thank you in advance for any help!

1528BC7D-CE09-464D-8DB3-D65BB30260CE.png
1528BC7D-CE09-464D-8DB3-D65BB30260CE.png828×1792 156 KB

2

I think it’s how that theme works. I mean, it does not scale the entire slideshow but adjusts the width only. It’s how most of the themes that support slideshow sections behave. It’s a design aesthetic thing because if you want to resize the entire slideshow, it would mean you have to retain the aspect ratio and the end result would be a small slide with a hard-to-read text due to its rectangular shape. But try exploring its theme settings page if that kind of resizing is supported. Normally, the sizes would be fit, contain, or cover.

Two recommendations:

  1. Avoid text on your slide image so that it will not appear cropped in a narrower viewport. Just add your text in the slide title and description (if supported).
  2. If you really want, to scale it the way you want, you need to play with CSS. If you don’t know how to do it, message me. Thanks.