How can I optimize the Studio theme for mobile viewing?

Store Design
1

Good evening,

I am using the Studio Theme. I have a slideshow section that is not automatically resizing when viewing on mobile. I currently only have one image dispalying. The image looks perfect on the desktop but the image is cut off on mobile. Is there a way to make this image resize automatically for mobile?

Thank you for your help.

-Kelli

2

@kgarza

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 767px) {
#shopify-section-template--16199629504749__slideshow .media>img {object-fit: contain;}
#shopify-section-template--16199629504749__slideshow .banner__media {background: #102540;}
}
3

Thank you so much!! This worked perfectly!

4

@kgarza

its my pleasure to help us

5

Hi, I’m having the same issue in Studio version 3.0.1. I added the provided code to the assets section at the bottom of the code. I didn’t see any changes unfortunately. My homepage slider looks great on desktop and tablet but on most phones it is being cut off. Can you please help?

6

i have the same issue. am also using the studio theme. i added the provided code but there was no change. the issue remained. i hope ketan kumar will be able to help us.