Responsive slider in css

Question

Responsive slider in css

Navigation

#1 by (0 votes)

0

How to make my slider responsive. I have already typed all the codes, and it is in css pure (I made it from galleries that I downloaded on the internet, which are used to change color, icons, etc.), I would like to know the code that I should put and where I should it, to make my slider responsive.

<!doctype html>
<html lang="en">
<title>Slider UNIP</title>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/vendor/normalize.css">
    <link rel="stylesheet" href="../../dist/gallery.prefixed.css">
    <link rel="stylesheet" href="../../dist/gallery.theme.css">
</head>
<body>

    <div class="gallery items-3">
        <div id="item-1" class="control-operator"></div>
        <div id="item-2" class="control-operator"></div>
        <div id="item-3" class="control-operator"></div>

        <figure class="item">
            <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua1.jpg" />
        </figure>

        <figure class="item">
            <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua3.jpg" />
        </figure>

        <figure class="item">
            <img src="C:\Users\jose\Desktop\css\gallery-css-master\examples\standard\agua2.png" />
        </figure>

        <div class="controls">
            <a href="#item-1" class="control-button">•</a>
            <a href="#item-2" class="control-button">•</a>
            <a href="#item-3" class="control-button">•</a>

        </div>
    </div>
</body>
</html>

css slider

asked by anonymous 07.05.2016 / 21:26

1 answer

How to do two different serialize and deserialize methods on node js, with passport? Many lines in a csv file

score 0 · Answer 1

You can create a <style> tag inside the file to quickly test and then move to the css file if you want. Within this tag you can use Media Query where you specify the screen size and how your slider should stay. Here is an example:

<style>
@media (max-width: 800px){
    .gallery {
        width: 100%;
    }
    .controls {
        width: 100%;
    }
}
</style>

This makes the browser understand that when the screen is less than or equal to 800px wide its slider should have a width equal to 100%. From here you can specify screen size and values for the slider.