Блог

на этой странице http://lafon.atelier47.fr/domaines-interventions мне нужно расположить изображение с помощью круга, используя margin-top, на большом рабочем столе позиционирование в порядке, но когда экран меньше, позиционирование не в порядке. Возможно, есть решение с помощью css, javascript или jquery?

Мой код:

 #qx-image-4919 {
    margin-top: -25%;   
}
  

Лучший вариант здесь — работать с медиа-запросами. Я не знаю, на каком этапе вы хотите, чтобы это сработало. Существует несколько способов настройки ваших медиа-запросов. Попробуйте вставить это в свой CSS:

 @media (max-width: 600px) {
  #qx-image-4919 {
    margin-top: -25%; // your position when the screen is max 600px or smaller  
  }
}
  

Используйте media query, чтобы изменить значения css (в вашем случае margin-top ) изображения на любое значение, которое вы хотите.

 @media (max-width:1200px){

    #qx-image-4919 {
        margin-top: -70%;   
    }

}
  

Это изменит верхнее поле на -70% для всех экранов устройств размером менее 1200 пикселей

Подробнее о медиа-запросах читайте здесь:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Сначала попробуйте с

 !important
  

Иначе,
Измените свой css-код вместо %; попробуйте использовать px

Нравится

 margin-top: -200px !important;