Tell us what’s happening:
I’d just like somebody to go over this and see if there’s any fine-tuning I could do to make it more readable and see if I’m all buttoned up before I submit! Any and all constructive criticism is greatly appreciated.
Also, how do I “test” it? I can test the example one with the left side bar but how do I make that happen? Thank you!
I forgot to mention that You should test Your projects on every major browser, namely Chrome, Firefox, Microsoft Edge and, unfortunately, Safari.
Of all the browsers, Safari is the most difficult to test because You need an apple device (iMac, iPhone, etc.) to run the tests, since it doesn’t work on Linux nor Windows. And if You’re thinking on using Apple OS on a virtual machine, take care because it’s illegal.
The real fun thing about testing Safari is that even if you do have a mac, you can’t test older versions of Safari on it, only the one it’s been updated to. Developers can’t even test on older versions of iOS because it only supports one version of the emulator.
Safari has become the bane of my existence as much as IE was15 years ago. But at least we have babel and polyfills now.
Because your header/title (Tony Stark) is an image you should use the same CSS for it as you do for the main image. Otherwise it will overflow its container on small screens. One option would be to just target the img element in the selector and have the style apply to all images.
I’d add a media query to lower the font size on the h2 at some point. The scale difference between the image and h2 become disproportional at lower screen sizes. I’d try around 540px to lower the font size.
You should give the paragraphs a max-width so they stay at a line length of around 80/120 characters. This helps to make the text more legible. You can use the #tribute-info section container for the max-width style.
You should increase the line height on the paragraph text, I’d say use no less that line-height: 1.4;. Again, this helps with legibility.
To get the social icons round you need to either remove the width, or you need to add the same value for the height. You can use a line-height with the same value to center the icons. You have to use !important; on the styles that overwrite any defaults for font-awesome, or you need to increase the specificity on the selector for the icons (e.g. footer .fa). You likely also have to keep the font size and width/height at the same values. Personally I would use a span or i element for the icons and wrap them in the link instead. I’d also suggest moving the font-awesome css link to the pen settings.