Проблема css с тегом @media, адаптация положения кнопки

На странице https://sport-print.online/sample-page/ у меня есть маленькая кнопка "Сравнить". Я пытаюсь адаптировать его с помощью кода CSS:

@media only screen and (max-width: 1920px), only screen and (max-device- 
width: 1920px) {
  .compare 
  {

 right: -500px;
 top: -720px;
 width: 70px;
 height: 30px;
 line-height: 20px;
 padding: 0 10px !important;
 padding-right: 20px !important;
 padding-bottom: 10px !important;
 }

 }

@media only screen and (max-width: 1024px), only screen and (max-device- 
width: 1024px) {
.compare 
{

 right: -300px;
 top: -320px;
 width: 70px;
 height: 30px;
 line-height: 20px;
 padding: 0 10px !important;
 padding-right: 20px !important;
 padding-bottom: 10px !important;
 }

 }

Только первая часть кода работает для ширины в 1920 пикселей. Вторая часть кода не работает. При изменении разрешения положение кнопки не меняется. Подскажите пожалуйста, в чем моя ошибка? Пожалуйста, исправьте мой код.

0
0
18
1

Ответы 1

Проблема решена, свойства top и right не влияют на position: static;

Необходимо было указать position: absolute; или положение: относительное; в свойствах @media. Рабочий код:

.compare 
{

 width: 70px;
 height: 30px;
 line-height: 20px;
 padding: 0 10px !important;
 padding-right: 20px !important;
 padding-bottom: 10px !important;
}



@media only screen and (max-width: 1920px), only screen and (max-device-width: 
1920px) {

.compare 
{
 position: absolute;          /* или  position: relative;*/
 right: -500px;
 top: -720px;

}

}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 
1024px) {
.compare 
 {

 position: absolute;             /* или  position: relative;*/
 right: -300px;
 top: 700px;

 }

 }

Другие вопросы по теме