I want the text "social" to stay where it is, vertically aligned with the black bars. But as you can see when I put it into bootstrap/html it is not aligned BUT atleast it stays with the black bars. on normal devices and mobiles

the code.

When I do fix this by adding in css it is perfectly aligned to the black bars but it doesnt stay where it is when the screen gets smaller(mobile).

on normal screens

on mobile screens

html code

css code

I want this to be perfectly aligned and stay aligned even when screen sizes change.

CodePudding user response：

you should detect the screen width in your css. The code could be like this:

@media (min-width: 576px) {
 #socials {
    max-width: 540px;
 }
}

@media (min-width: 768px) {
  #socials {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  #socials {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  #socials {
    max-width: 1140px;
  }
}

CodePudding user response：

Try using fixed as position instead of absolute,

#socials
{
    position:fixed;
}