Project 3 Completed. Two Remaining Issues

Project Feedback
#1

Hi. So I completed project 3: landing page. I got some feedback and updated it. I have two (2) remaining issues I need help with.

  1. I tried to use Font Awesome icons, but they wouldn’t show up. I tried for hours with no luck. My code is still in there.
  2. On a smart phone screen, I’m having issues with the header in the media query. It’s position is fixed, which is good, but it blocks the email input bar, the submit button. If I change the position to relative, it looks better (not good), but it is no longer fixed and you can’t see it when you scroll down.

I can’t seem to figure these two issues out my own, please help!

Thank you!

https://codepen.io/mastercoder92/pen/OJbRWmB

#2

In order to use font awesome icons you have to include the font awesome external style sheets in your pen. Click on the CSS settings icon, search for fontawesome under Add External Stylesheets and add it. After I did that the guitar icon showed up on your page.

1 Like
#3

I saw that you tried to add a font awesome link to your head section in the html settings but I wasn’t familiar with that link.

I always use this cdn link and I haven’t had any issues with it.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

#4

I just tried that and it worked! A guitar icon appeared. now I can move it and edited like normal right? thank you thank you!

#5

Yes, you should be able to.

I’m not able to replicate your second issue. No matter what the view port width the email input is always below the header. But the header is not in a fixed position at narrow widths.

#6

IMG_1493.PNG
IMG_1493.PNG1125×2436 253 KB
this is the header with a fixed position

#7

IMG_1492.PNG
IMG_1492.PNG1125×2436 205 KB
this is header in a relative position

#8

You see how you have a big margin-top on the email input to push it down below the header in wide view, you basically just need to make it bigger to push it below the header in narrow view. Personally, I would not put the top margin on the input but rather on the form.

Also, in narrow view you might want to try to make that header as short as possible if you are going to leave it showing. Looking at the screen snap it takes up about half of the height which is not ideal. Reduce the vertical spacing between the links and at the top/bottom of the header. Possibly make the font size smaller. Even better, you might consider having a 2x2 grid instead of a 1x4.

#9

IMG_1495.PNG
IMG_1495.PNG1125×2436 226 KB
I’m making progress. Is there a way to change the “home” “pricing” etc, to go to horizontal instead of being a vertical column? I also want to make the grey color smaller and centered as well. I’m not entirely sure how to go about doing that. I’ll keep working on it. Thank you so much for all your help.

#10

Yes, definitely. You could set display: flex on the <ul> that contains the links.

1 Like