Hello. How do I make the slides in the slideshow responsive so it looks good across all devices?
My website is: https://aelisbeautyproducts.com/
I want the girl on the image to be at the center of the screen.
Thank you for any help.
Hi, Miguel!
All Shopify themes are optimized to adapt smoothly between devices. Keep in mind that screen sizes vary, so the way your slideshow images look on your phone might differ from customers’ phones. You may need to edit the image itself and upload it again to see if you can get the model centered on the page. I recommend checking out these guidelines for help with images:
- Website Image Size Guidelines for 2024
- Best practices for slideshows, image banners, and full-width images
Alternatively, if you have a mobile version of this image where the model is centered, it might be possible to add that image with custom coding. While custom coding isn’t something I am able to provide support for, you can contact Shopify Support via the Help Center to see if this is something our Theme Support team can assist with.
Hi @miguelg0610
You can try to add this code to your theme.liquid file, after in Online Store and check again
Or you can add 2 slideshow sections, one for mobile and another for desktop, so you can use separate images for each section.
Add this CSS code to Custom CSS of mobile slideshow section to hide it on desktop
@media (min-width: 768px) {
.slideshow { display: none !important; }
}
And this code to Custom CSS of desktop slideshow section to hide it on mobile.
@media (max-width: 767px) {
.slideshow { display: none !important; }
}
Thank you. Adding the code after on theme.liquid file worked.
THANK YOU for the idea of two slide shows with the code to hide one on mobile and hide the other on desktop. This works perfectly and was exactly what I was looking for!
Happy I could help!
Not solved for me. plz help. Here are details:
website: www.gencraze.com
Image not adjusting its dimensions according to the view port in dawn theme
Issue is the images under slideshow is not fitting on mobile view at all. when i added pic it was not adapting the slideshow size means it is not streching and changing its dimenstions according to the view port. Please help me this is the very basic thing that a theme must handle itself. I am using dawn theme. this is the basic requirement in any theme!!!