Media-so'rovlarni ishlatib, ba'zi elementlarni to'xtatish nuqtalarida li elementlarni qanday qilib o'zgartirish mumkin?

Men sahifaning pastki qismida ijtimoiy media piktogrammalar blokini yaratdim.

Men ularni 375 pikseldan kichik ekranlar uchun yarim o'lchamda qilishni xohlayman, ammo media-so'rovim ishlamayapti.

Mana mening CSS-larim:

@media (max-width: 275px) {
.custom-social-icon
    padding:5px 7px;
}

.fa-facebook {
padding:10px 14px;
transition: .5s;
background-color: lightsteelblue;
}

Va mening HTML:

<div class="footer-social-icons">
0

6 javoblar

Sizning "{}" ommaviy axborot so'rovingiz ichida bir necha jingalak qavslarni yo'qotasiz

@media (max-width: 275px) {
 .custom-social-icon{
   padding:5px 7px;
   }
  .fa-facebook {
    padding:10px 14px;
    transition: .5s;
    background-color: lightsteelblue;
   }
 }
1
qo'shib qo'ydi

Sizning "{}" ommaviy axborot so'rovingiz ichida bir necha jingalak qavslarni yo'qotasiz

@media (max-width: 275px) {
 .custom-social-icon{
   padding:5px 7px;
   }
  .fa-facebook {
    padding:10px 14px;
    transition: .5s;
    background-color: lightsteelblue;
   }
 }
1
qo'shib qo'ydi

Ushbu koddan foydalaning, sizga yordam berishi mumkin. Bu erda CSS-ni quyidagi tarzda o'zgartirasiz:

<!DOCTYPE HTML>

  <head>
    <title> Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
  </head>
  <body>
    <div class="footer-social-icons">
      
    </div>
  </body>
</html>
1
qo'shib qo'ydi
Rahmat @Kiran Bu ishlagan! Aslida 6 ta belgi bor. Buni har bir kishi uchun qildim, lekin bir vaqtning o'zida barcha piktogrammalarga tatbiq etishning bir usuli bor deb taxmin qilaman. Har qanday fikr qanday qilib? Men buni qilolmayman. Rahmat!
qo'shib qo'ydi muallif sim, manba
Ajoyib! Rahmat @Kiran
qo'shib qo'ydi muallif sim, manba
Belgilarning har biriga bir xil sinf nomini qo'shing .Shuning uchun bu sinf nomi ichida umumiy xususiyatni qo'shing.
qo'shib qo'ydi muallif KiranPurbey, manba
Xush kelibsiz @ sim
qo'shib qo'ydi muallif KiranPurbey, manba

Ushbu koddan foydalaning, sizga yordam berishi mumkin. Bu erda CSS-ni quyidagi tarzda o'zgartirasiz:

<!DOCTYPE HTML>

  <head>
    <title> Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/font-awesome-animation.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
  </head>
  <body>
    <div class="footer-social-icons">
      
    </div>
  </body>
</html>
1
qo'shib qo'ydi
Rahmat @Kiran Bu ishlagan! Aslida 6 ta belgi bor. Buni har bir kishi uchun qildim, lekin bir vaqtning o'zida barcha piktogrammalarga tatbiq etishning bir usuli bor deb taxmin qilaman. Har qanday fikr qanday qilib? Men buni qilolmayman. Rahmat!
qo'shib qo'ydi muallif sim, manba
Ajoyib! Rahmat @Kiran
qo'shib qo'ydi muallif sim, manba
Belgilarning har biriga bir xil sinf nomini qo'shing .Shuning uchun bu sinf nomi ichida umumiy xususiyatni qo'shing.
qo'shib qo'ydi muallif KiranPurbey, manba
Xush kelibsiz @ sim
qo'shib qo'ydi muallif KiranPurbey, manba

Sizning kodingizdagi oddiy xatolik. Media so'rovingizni bu bilan almashtiring va u mukammal ishlaydi.

@media (max-width: 275px) {
 .custom-social-icon {
  padding:5px 7px;
 }

 .fa-facebook {
  padding:10px 14px;
  transition: .5s;
  background-color: lightsteelblue;
 }
}
1
qo'shib qo'ydi

Sizning kodingizdagi oddiy xatolik. Media so'rovingizni bu bilan almashtiring va u mukammal ishlaydi.

@media (max-width: 275px) {
 .custom-social-icon {
  padding:5px 7px;
 }

 .fa-facebook {
  padding:10px 14px;
  transition: .5s;
  background-color: lightsteelblue;
 }
}
1
qo'shib qo'ydi