将图像放在顶部边缘

Question

on this page http://lafon.atelier47.fr/domaines-interventions i need to positioning the image with circle using margin-top, on large desktop the positioning is ok but when the screen is smaller the positioning is not ok. Perhaps there is a solution with css, javascript or jquery ?

My Code:

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

Answer 1

Use media query to change css values (in your case margin-top ) of image to whatever value you want.

@media (max-width:1200px){

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

}

This will change the margin-top to -70% for all device screens that are less than 1200 pixels

Read more about media queries here:

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

Answer 2

Best option here is to work with media queries . I don't know at which stage you want it to kick in. There are several ways to setup your media queries. Try to paste this in your CSS:

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

Answer 3

First try with

!important

Else, Change your css code instead of % ;try with px

Like

margin-top: -200px !important;

---