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