How can I fix my slideshow to display properly on mobile?

[Betenics]

Hello all,

I am having a problem with the slideshow doesn't showing properly on phone.

I know it's about design, but is there some code I can change so it fits on phone exactly like on pc?

Thanks

store is www.betenics.com

[brandography]

Hello! I can take a look into this, what theme are you using on your store? Will the slideshow have multiple photos? I'm only seeing the one right now. 

[Betenics]

Hello, I am using Brooklyn theme.

It will have just one photo that is displayed

[brandography]

So it looks like the image just gets stretched on mobile, which makes the text that appears in the image to also look stretched. There are other themes that allow you to select a different image specifically for mobile that prevents things like this from happening, but you should know that it's not best practice to write text in an image. Search engines will not see text on images and that could hurt your ranking. My advice would be to choose a different section type such as Image with Text inside of your current theme so that you can somewhat recreate this look while also having hard coded text. Good luck!

[diego_ezfy]

@Betenics 

Unfortunately that is a known issue with the Brooklyn theme and most of the free theme sliders, they were not coded with a mobile-first approach. There isn't any sort of coding that could easily fix that. It would require to re-build the slideshow section, which, in my opinion, is rarely worth it financially.

With that being said, there are copy/paste Slideshow sections like this that can be a cheaper (yet professional) alternative.

This would fix the problem you're facing, give you much more customization freedom and also work with any stores/themes you use in the future. Perhaps it could be a viable solution.

Kind regards,
Diego

[Don]

Hi there @Betenics!

I can see you've already got some feedback on your query here from our fellow Community members, that's great!

I also took a look at your store to check this out, though it was not immediately clear which section was the slideshow (as there may be just one image in place).

That said, I can confirm some of the info shared here on how slideshow images like this are coded and how to work with them in order to get the most out of them.

Check out some general tips for using the Brooklyn theme here, including info on recommended image sizes.

Because the size and shape of the slideshow are dependent on the size and shape of the customer's device, your slideshow images will be cropped on some screens. Try to use images that have a focal point in the middle so that the important part of each image is always visible.

There's more info on working with the slideshow section here you can check out.

Try using a few different devices with different screen sizes to test out any images you're looking to use in your slideshow, to see how they appear when cropped differently in this way.

Finally, for now, I'd recommend this article from our Partners blog, which goes into depth on combatting image cropping.

Can you tell me a bit more about what stage your business is at?

Are you building out a store for an existing business to sell online, or is this an entirely new venture?