Search code examples
htmlcssbuttonscreenresolution

Buttons moving when different resolution on monitor

Hello so today i was making new layout for my website and i was adding buttons to header but this happens (here is screenshot from my 1st screen 1920x1080, buttons will show normally) enter image description here

And my 2nd screen (1360x768)

enter image description here

#header {
background:#CCC;
width:100%;
height:58px;
background-size: cover;
background-attachment: fixed;
display:inline-block;}


.buttons {
margin-left:800px;
    position:relative;

}

#button a {
font-family:Trebuchet MS;
text-decoration:none;
color:#fff;
font-size:30px;
display:inline-block;
padding:8px 10px;
display:inline-block;
position:relative;

}

Solution

  • You should change font-size for different resolutions with media queries. Example:

    @media (min-width: 1300px) and (max-width: 1600px) {
#button a {
font-size: 20px;
} 
}