Blood and sweat have gone in this Product Landing page

Code Feedback
1

Hello everyone!

I’ve been doing this FCC classes for about a month now, I’m completely new to this, and really enjoy all the work that goes into programming so far. It’s terribly challenging and rewarding at the same time.

I used Flexboxes, and almost lost the plot. I think now it has started to sink in.

I have a question, how can i make my footer closer to the bottom edge?

I welcome all criticism!

Thank you

Cecile

https://codepen.io/noethix/pen/pOgqVZ

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/

2

hey the reason is you applied padding:50px to the body

body{
padding:50px;
}
add some height to footer

like

footer{
height:30px;
}

3

Thank you! that worked a treat :slight_smile:

1 Like
4

nice, happy coding :+1:

1 Like
5

Hi @noethix I think your design is solid and I appreciate the amount of work you’ve put into this project (I’m also new to coding). Your project doesn’t pass the FCC test for @media queries yet and you should add one for smaller screen sizes. To test drag the left or right side of your browser window back and forth or if you’re on Chrome choose View>Developer>Developer Tools. You’ll find an option to test for common phone and tablet sizes.

Nice work, keep it up. That’s how we get better!


05%20AM
05%20AM1691×1059 154 KB

1 Like
6

Clean, nice typefaces, pretty good use of white space. I like it.

  1. Your opening and closing body tags are not in the right place, on codepen you don’t need the body tags so just delete them.

  2. Right now it’s not responsive at all, and the media queries you do have, are not correct.

Here is how it should look:

.class-selector {
  font-size: 4rem;
}

@media (max-width: 800px) {
  .class-selector {
    font-size: 2rem;
  }
}

Here are a few things to do in your media queries:

Lower the section padding.
Switch to flex-direction: column for your chairs section, and use align-items: center;
Lower font-sizes as needed.

  1. Functional Design should be a h1

  2. I would add cursor: pointer; to your buttons.

  3. To make the border on the button work they need a border style border-style: solid; (shorthand example: border: 1px solid black).

This is just an idea, but i think it might look nice to invert the buttons on hover.

.btn:hover {
  color: white;
  background: black;
}
7

Thank you so much for your reply! I’m gonna check this all out and make the necessary adjustment. Media queries are still a bit of a grey area at the moment. I’ll get there eventually…