Почему у меня не срабатывает @media в одном месте ?
 

Вот условие:

<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) у меня едет дизайн, что ж не так ?

Вот это
<td width="50%" valign="center"></div>
чего такое?
Почему нет </table> ?

Ее закрытие у меня идет ниже, в шапке вставлен баннер 468х60 , я сделал так чтобы он не растягивал дизайн на телефоне, убрал, вот:

<style>
@media (max-width:500px){
.Banner
{
display: none;
}
}
</style>
<div class="Banner">
<div class="Banner" id="linkslot_275369"><script src="https://linkslot.ru/bancode.php?id=275369" async></script></div>
</div>

</td>
<td width='3%'></td>
</tr>
</table>
</div>

Может я неправильно поступил так ? Табле не срабатывает?

Ааа , е-мо-е , это td лишняя, точнее как раз от баннера, а не от лого.
Сейчас перепроверю это.

Вот что сейчас

<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>
</div>

<style>
@media (min-width: 501px) {
.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/logom.png'); width: 206px; height: 76px;">
</div></a>
</td>
<td width="26%" align='left' valign='center'>
</td>
</div>

При таком коде, у меня почему-то сразу 2 Лого на ПК мониторе, а на телефоне дизайе съехал, скрин:

Спасибо тебе огромное, что ты заметил этот td , и спросил что это за незаконченная строка !!! Ты очень сильно помого ... Теперь у меня все более менее четко, все как я хотел !!! Спасибо от души !!! Я 2 дня ковырял все, пробовал разные прийомы, а этот td не мог заметить!)))

А вот что вышло в итоге:

<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 class="Banner" id="linkslot_275369"><script src="https://linkslot.ru/bancode.php?id=275369" async></script></div>
</div>
</td>
</tr>
</table>
</div>

<style>
@media (min-width: 501px) {
.logom {
display: none;
}}

@media (max-width:500px){
.Banner
{
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/logom.png'); width: 206px; height: 76px;">
</div></a>
</td>
<td width="26%" align='left' valign='center'>
</td>
</table>
</div>

Есть хорошее правило - всегда закрывать все теги, где есть или может быть какое то содержимое. Даже, если их можно не закрывать.
<br> и <input>, конечно закрывать не надо,
А <li>, <p>, <td> ... - лучше закрывать.
И <tr> тоже.
Там есть в конце незакрытый.

Точно ! Еще раз спасибо.