Изменить ширину с помощью @media (min-width: XXXXpx) Отзывчивые объявления

Question

Извините за запутанное название .. Я не уверен, что это возможно сделать, но если у вас есть другой способ, пожалуйста, будь моим гостем.

.top-widget { 
width: 75.5%; <-------------- This is the correct width that i want to have. 
padding: 0 3px 0 0; 
border: none; 
background: none; 
} 

Но когда я достигаю определенного пикселя, я хочу изменить ширину и сохранить ее ниже 800 пикселей.

@meda (min-width:800px) { .top.widget { width: 55.%; } } <-- This gives everything 55% (Also abow 800px) 
@media (min-width:800px) { .adslot_1 { width: 320px; height: 100px; } } 
@media (min-width:1024px) { .adslot_1 { width: 728px; height: 90px; } } 
@media (min-width:1300px) { .adslot_1 { width: 728px; height: 90px; } } 
@media (min-width:1700px) { .adslot_1 { width: 728px; height: 90px; } } 

Это так, что реклама выглядит потрясающе на планшетах.

Answer 1

Использование max-width вместо min-width, поэтому запрос СМИ используется ниже заданной ширины экрана

В вашем случае:

@media (max-width:800px) { .top.widget { width: 55.%; } } 
@media (max-width:800px) { .adslot_1 { width: 320px; height: 100px; } }  
@media (max-width:1024px) { .adslot_1 { width: 728px; height: 90px; } }  
@media (max-width:1300px) { .adslot_1 { width: 728px; height: 90px; } }  
@media (max-width:1700px) { .adslot_1 { width: 728px; height: 90px; } }