[Texnarik]

Вот условие:

<style>

@media only screen and (max-width: 500px) {

.logo

}

</style>

<div class="logo">

<table width="100%">

<tr>

<td width='3%'></td>

 

<td width="24%" align='left' valign='center' class="responsive">

    <a href="https://speed-bux.ru/">

<div style="background: url('images/logo.png'); width: 206px; height: 50px;">

</div></a>

</td>

<td width="26%" align='left' valign='center'>

</td>

<td width="50%" valign="center"></div>

Вопрос: почему у меня не срабатывает @media? Я хотел чтобы на разных экранах было разное лого, но min и max вообще не срабатывает, как правильно сделать ?



Да, и вот что, когда я немного хитрю и делаю вот так:

<style>

@media (max-width: 500px) {

.logo {

display: none;

}}

</style>

<div class="logo">

<table width="100%">

<tr>

<td width='3%'></td>

 

<td width="24%" align='left' valign='center' class="responsive">

    <a href="https://speed-bux.ru/">

<div style="background: url('images/logo.png'); width: 206px; height: 50px;">

</div></a>

</td>

<td width="26%" align='left' valign='center'>

</td>

<td width="50%" valign="center"></div>

 

<style>

@media (min-width: 500px) {

.logom {

display: none;

}}

</style>

<div class="logom">

<table width="100%">

<tr>

<td width='3%'></td>

 

<td width="24%" align='left' valign='center' class="responsive">

    <a href="https://speed-bux.ru/">

<div style="background: url('images/logo.png'); width: 206px; height: 50px;">

</div></a>

</td>

<td width="26%" align='left' valign='center'>

</td>

<td width="50%" valign="center"></div>

После добавления @media (min-width: 500px) у меня едет дизайн, что ж не так ?