My HTML elements change position according to screen size

user_13252543 0
Viewed 621

I have an issue positioning HTML elements. I know this has a pretty simple answer but I struggle with this issue on every website I make and I'm a newbie at web dev.

.artstation_b{
    position: absolute;
    left: 45%;
    top: 395%;
}
.behance_b{
    position: absolute;
    left: 49%;
    top: 394.5%;
}
.instagram_b{
    position: absolute;
    left: 53%;
    top: 395%;
}

I'm laying out my images like this if I don't set the position to absolute I just can't get the results I want. And I use absolute because I'm laying out images on images. If I don't do absolutely it lays them under or next to the image.

So everything I do is fine on my 1080p screen but when I use another 1080p screen that has a different screen size everything messes up.

css html
1 Answers

you should use media queries to give style of your different contents according the different screen size here is some media queries type and hope you will find it useful

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
 /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
 /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
 /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
 /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
 /* styles */
}
user_135368930
Related