Removing empty space between slider and play and stop.

[chefsimecek]

Hey,

I recently changed the resolution of the slider to fit better on the phone and it looks nicer on the desktop also, however, it created space under it, does anyone know where I can adjust this space (remove). Also, I would be very happy if someone has a better recommendation of the code to make the desktop and phone more fit. I’m not a coder professional, so any help is appreciated. THANK YOU!

[Small_Task_Help]

Hi,

Adjust CSS (Locate the CSS file (assets/theme.css, assets/styles.scss.liquid, etc.)

Example of CSS for both the empty space and responsiveness

/* General styles for slider container */
.slider-container {
  width: 100%;
  max-width: 1000px; /* Adjust to fit your design */
  margin: 0 auto; /* Center the slider */
  padding: 0;
  overflow: hidden; /* Hide overflow */
}

/* Responsive styles */
@media (max-width: 768px) {
  .slider-container {
    max-width: 100%; /* Full width on mobile */
  }
}

.slider img {
  width: 100%; /* Ensure images are responsive */
  height: auto;
}

/* Adjust controls positioning */
.slider-controls {
  margin-top: 10px; /* Adjust as needed */
  text-align: center;
}