How can I optimize slideshow images for all screen sizes?

Store Design
1

The slideshow on my homepage is cropped on the full screen/large desktop view. Is there any way to make sure that the slideshow images look good on each kind of screen? including mobile view too!

My website is Your Weekend Casual Outfit – Sunday’s Fit (sundaysfit.com)

2

anyone can help me with this? thanks!

3

Hi @jasonthegrammy ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (min-width: 750px) {
	.slideshow.slideshow--large {
		height: 1500px !important;
		max-height: none !important;
	}
}

Hope it helps!

1 Like
4

Hi, @jasonthegrammy !

Thank you for reaching out.

I’m so glad the solution provided by, @LitCommerce , worked for you. I trust our feature readers will find this extremely helpful.

For other users that may come across this thread and are struggling with customizing a theme that uses a responsive design, you may benefit from checking out our article on combatting image cropping on Shopify slideshow sections.

I trust that will help shed a light on how to utilize responsive design to your benefit and better work with your theme.

Warm regards,

1 Like