Re: Make slides on slideshow responsive across all devices on Dawn theme.

miguelg0610 · ‎07-28-2024

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.

Dan-From-Ryviu · ‎07-28-2024

You can try to add this code to your theme.liquid file, after <head> in Online Store and check again

<style>
@media (max-width: 749px) {
.slideshow__media { height: 20rem !important; }
}
</style>

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; }
}

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Sophia · ‎07-28-2024

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:

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.

Sophia | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

Dan-From-Ryviu · ‎07-28-2024

Hi @miguelg0610

You can try to add this code to your theme.liquid file, after <head> in Online Store and check again

<style>
@media (max-width: 749px) {
.slideshow__media { height: 20rem !important; }
}
</style>

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; }
}

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

miguelg0610 · ‎07-29-2024

Thank you. Adding the code after <head> on theme.liquid file worked.

Laurie_ONeill · ‎08-28-2024

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!

Dan-From-Ryviu · ‎08-28-2024

Happy I could help!

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gencraze · ‎09-21-2024

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!!!!!!!!!!!!!!!!!!!!!

Re: Make slides on slideshow responsive across all devices on Dawn theme.

Make slides on slideshow responsive across all devices on Dawn theme.

Community Blog Articles