CODEWITHSUNDEEP
htmlcssoptimizationsliderresponsive
BB23
BB23

Reputation: 185

HTML responsive Slideshow

I have a website with a full width Slideshow in the header. The images in the slideshow cannot be cropped. Right now i set that my slideshow allows has width: 100% and a variable height.

The problem is that on phones (due to the different screen proportions) the slider looks super slim.

As I already said: I cannot crop the images. so i probably have to create a new slider for mobile devices. What is the best way to do this?

If i just do something like:

<div class="mobileslider">

for mobile devices and

<div class="slider">

for desktops, I could hide one element via css. However, both sliders would load, wont they? Whats the most efficient way to do this? Thank you for your help.

Upvotes: 1

Views: 236

Answers (1)

doctypecode
doctypecode

Reputation: 101

You should just be able to hide the element and display the other one with a couple of media queries based on screen size.

@media only screen and (max-width: 480px) {
    .slider {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .mobileslider {
        display: none;
    }
}

Upvotes: 1

Related Questions