0

I am using developer tools in Chrome and choosing the Laptop L option which is 1440px width.

The issue is seen in the image below:

So, the twitter and instagram icons are cut off to the right of the screen.

Further, when I try to move the icons to the left for a media query of 1440px width, the icons get cut off completely. You can see in the above image that the facebook icon is slightly cut off on the left.

The code surrounding the footer icons is:

@media screen and (max-width:1440px) {
  #footer-icons{
    position:relative;
    left:10%;
  }
}

The whole of my code can be seen here:

https://codepen.io/JoyFulCoding/pen/EzXowL

I am struggling to pinpoint where the issue is so any help is appreciated. How do I position the three icons such that they can be seen in the bottom right hand corner when viewed on a screen of width 1440px?

Sarah Cox
  • 3
  • 2

1 Answers1

0

Relative positioning is best used for only small adjustments in position. If you want to right align that element, simply give it margin-left:auto.

To explain further, that rule isn't even taking affect, due to its specificity being lower than the "footer #footer-icons" rule. More info on CSS selector specificity.

Kravimir
  • 651
  • 1
  • 6
  • 7