Помогите с HTML!!

Question

Помогите с HTML!!

-oggvenV Знаток (279), на голосовании 1 год назад

Есть сайт на html css. Хочу сделать так чтобы он был адаптивным под разные экраны. Сделал @media max width 600 но он делает все наоборот. вот html:


<div class="container">
<div class="row">
<div class="col-12">
<ul class="product-list">
<li class="product-card">
<a class="product-card-image-link" href="product.html">
<img class="product-card-image" src="images/catalog/1.jpg" width="220" height="200" alt="">
</a>
<div class="product-card-content">
<a class="product-card-title-link" href="">
<h3 class="product-card-title">Шампунь для мужчин Brews Daily</h3>
</a>
<span class="product-card-price">744 ₽</span>
<a class="button product-card-button" href="#">Купить</a>
</div>
</li>
<li class="product-card">
<a class="product-card-image-link" href="product.html">
<img class="product-card-image" src="images/catalog/2.jpg" width="220" height="200" alt="">
</a>

ЕСЛИ НУЖЕН БУДЕТ CSS, ТОЖЕ ДАМ

Answer 1

Dlazder Мудрец (16929) 1 год назад

Так ты где медиа пишешь? В css? Его и кидай. Твой медиа запрос применяется к устройствам шириной менее 600px

-oggvenVЗнаток (279) 1 год назад

css не помещается. там 600 строк.

Dlazder Мудрец (16929) zxc.PEEK, тогда учи основы. Ты хоть открывал статью по медиа запросам?

Answer 2

Что именно наоборот он делает? блоки div мож тоже нужно подгонять по размер, интересная темка вообще, я сам всё обещаю и обещаю заняться и читать по адаптивную вёрстку.

Answer 3

Зачем тут нужен html, когда основное в CSS))

Там важен порядок, от меньшего к большему

 @media (max-width: 600px) { 
  /* Стили для экранов шириной до 600px */ 
  .product-card-image { 
    width: 100%; 
    height: auto; 
  } 
 
  .product-card-content { 
    text-align: center; 
  } 
} 
 
/* Стили для больших экранов */ 
.product-card-image { 
  width: 220px; 
  height: 200px; 
} 
 
.product-card-content { 
  text-align: left; 
}