0
    @charset "utf-8";
.obg {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 5px;
}
div img {
width: 100%;
height: auto;
transition: all 0.5s ease-in-out;
}
.g1:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
 transform: scale(1.1);
}
.g2:hover{
-webkit-transform: scale(0.8);
-ms-transform: scale (0.8);
 transform: scale(0.8);
}

.g3:hover {
border-radius: 50%; 
}
.g4:hover {
border: solid 5px  #F3ABEF;
width: 290px;
height: 190px;
}
.g5:hover {
transform: scaleX(-1);
}
.g6:hover {
transform: skewX(20deg);
}
.g7:hover{
border: 5px solid #B0CBC4;
background-color: #F2EBD8;
border-top-left-radius: 100% 20px;
border-bottom-right-radius: 100% 20px;
}

 .g8:hover{
 outline: 5px solid #9E8463;
 outline-offset: 5px;
}
 @media screen and (max-width: 768px){
 img {
    max-width: 48%;
    height: auto;
    padding: 1%;
}
div .obg {
    min-width: 320px;
}
}
@media screen and (max-width: 480px)
{

div .obg{
    min-width: 320px;
    width: 320px;
}
img {
    max-width: 98%;
    height: auto;
    padding: 1%;
}
}

html код

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8" >
 <title>Документ без названия</title>
 <link href="g1.css" rel="stylesheet" type="text/css">
 </head>

 <body>
 <div class="obg">
 <div><img src="1.JPG" class="g1"></div>
 <div><img src="2.JPG" class="g2"></div>
 <div><img src="3.JPG" class="g3"></div>
 <div><img src="4.JPG" class="g4"></div>
 <div><img src="5.JPG" class="g5"></div>
 <div><img src="6.JPG" class="g6"></div>
 <div><img src="7.JPG" class="g7"></div>
 <div><img src="8.JPG" class="g8"></div>    
 </div>
 </body>
 </html>
2

2 ответа 2

1
div .obg{
    min-width: 320px;
    width: 320px;
}

Означает все элементы с классом .obg внутри тега div, у вас таких нет

1

Добавь в head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.