Как добавить медиазапросы, чтобы уменьшить отступы для моего изображения? - PullRequest
Новая
       80

Как добавить медиазапросы, чтобы уменьшить отступы для моего изображения?

0 голосов
/ 25 февраля 2019

Я работаю над небольшой галереей, и я только что понял, как использовать Salvattore (похож на Masonry).Проблема, с которой я сталкиваюсь, заключается в том, что когда я уменьшаю веб-страницу, отступ остается 10px, и я хочу, чтобы он был 5px вместо этого, чтобы все 3 столбца все еще были видны, а отступы выглядели хорошо (вроде как Pinterest),Я пробовал медиа-запрос, но он не работает.Вот мой HTML и CSS: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="salvattore.js">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>All Things Pink!</title>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-nav-demo">
                    <ul class="nav navbar-nav">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="jumbotron">
                <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
                <p>Random beautiful images of my favorite color.. pink!</p>
            </div>

            <div id="grid" data-columns>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
            </div>
        </div>
    <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="salvattore.js"></script>

</body>


body {
padding-top: 70px;
}

.jumbotron {
    color: rgb(255, 159, 146);
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
background-color: #FFF;
}

.jumbotron p {
    letter-spacing: 4px;    
}

.navbar-inverse {
    background-color: #f06464;
    border-color: #666;
}

.navbar-inverse .navbar-brand {
    color: #FFF;
}

.navbar-inverse .navbar-nav>li>a {
    color: #FFF;
}

#grid[data-columns]::before {
    content: 3 .column.size-1of3;
}

.column { 
    float: left;
}

.size-1of3 { 
    width: 33.333%; 
}

img {
    max-width: 100%;
    padding: 10px;
}

@media (max-width: 450px;) {
    img {
        padding: 5px;
    }
}

1 Ответ

0 голосов
/ 25 февраля 2019

Похоже, ваш тег @media сформирован неправильно.Попробуйте использовать «@media only screen» вместо «@media» и проверьте это https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.Надеюсь, что это hel 

body {
padding-top: 70px;
}

.jumbotron {
    color: rgb(255, 159, 146);
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
background-color: #FFF;
}

.jumbotron p {
    letter-spacing: 4px;    
}

.navbar-inverse {
    background-color: #f06464;
    border-color: #666;
}

.navbar-inverse .navbar-brand {
    color: #FFF;
}

.navbar-inverse .navbar-nav>li>a {
    color: #FFF;
}

#grid[data-columns]::before {
    content: 3 .column.size-1of3;
}

.column { 
    float: left;
}

.size-1of3 { 
    width: 33.333%; 
}

img {
    max-width: 100%;
    padding: 10px;
}

@media all and (max-width: 450px) {
    img {
        padding: 5px;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="salvattore.js">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>All Things Pink!</title>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true">PINKI</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-nav-demo">
                    <ul class="nav navbar-nav">
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Sign Up</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="jumbotron">
                <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
                <p>Random beautiful images of my favorite color.. pink!</p>
            </div>

            <div id="grid" data-columns>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1496193574520-069d8f5c945e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1518691340140-512e66ce957b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1488953994029-e6a7ba3348f7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1495464205000-94ffda5a0064?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1504898770365-14faca6a7320?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1470165451736-166cb1cc909d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1429152937938-07b5f2828cdd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1445098693232-134135a7ccfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1488895892452-8df3dbc55c68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1461439626172-c3b891456f2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1292&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1472850156196-0156e307c552?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1453070516881-ae11f3f6b1b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1519717993199-3b3da2425d64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1517148627138-c9728d76331c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
                <div class="column size-1of3">
                    <div>
                        <img src="https://images.unsplash.com/photo-1525268771113-32d9e9021a97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1498588113594-33ad5b4d19b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1496372412473-e8548ffd82bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1475&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1490395930356-7e64acf16e23?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=633&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1479912649391-55173fe33de4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1516826049371-1e7856387270?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1514542996715-a1ff9ccfb039?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
                    </div>
                </div>
            </div>
        </div>
    <script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="salvattore.js"></script>

</body>
...