Change the slideshow alignment for each different slide in dawn theme

[ashishsharma178]

Could anyone please help if it's possible to change the slideshow alignment like height, font size etc. separately for each different slides for Desktop & Mobile / Dawn Theme. Also, would like the slide images to be zoom out as they are automatically zoomed in.

[oscprofessional]

Hello @ashishsharma178 
You will need to use CSS media queries to apply different styles for desktop and mobile viewports. target each slide individually, you can assign unique classes or IDs to each slide

1) Customize Slideshow Height and Font Size
example Use CSS

/* Mobile Styles */
@media only screen and (max-width: 767px) {
  .slideshow__slide--1 {
    height: 300px;
    font-size: 16px;
  }
  .slideshow__slide--2 {
    height: 350px;
    font-size: 18px;
  }
}

/* Desktop Styles */
@media only screen and (min-width: 768px) {
  .slideshow__slide--1 {
    height: 500px;
    font-size: 24px;
  }
  .slideshow__slide--2 {
    height: 600px;
    font-size: 28px;
  }
}

2) Adjust Zoom Level for Slide Images

Example css

.slideshow__image {
  object-fit: contain;
  transform: scale(1); /* Adjust the scale to zoom in or out */
}

/* Optional: Different zoom levels for each slide */
.slideshow__slide--1 .slideshow__image {
  transform: scale(0.8); /* Zoom out for slide 1 */
}

.slideshow__slide--2 .slideshow__image {
  transform: scale(1.2); /* Zoom in for slide 2 */
}

• Edit your theme’s CSS file:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Find your theme’s CSS file (usually located under Assets or Sections folder).
  • Add the CSS code to customize the slideshow styles.

• Edit your theme’s Liquid files:

  • Locate the slideshow.liquid or equivalent file in the Sections or Snippets folder.
  • Assign unique classes or IDs to each slide as needed.

I hope This Solution is Useful If any Query Please connect with us so we will guide for you

[ashishsharma178]

Could you do it for me if I share the password with you. If not, then we will see how to proceed further.

[ashishsharma178]

Hello @oscprofessional 

Could you please help me do it for me as I am unaware how to create the Ids for each slide.

If require, I can share the password with you so can access the code.

[ashishsharma178]

@oscprofesionals - Waiting for you response so could you please check & help as I need to go live soon.