Product Landing Page Feedback Needed Please

This project challenged me much more than I expected it to. I had a really difficult time understanding Flexbox and I spent a lot of time watching tutorials and going through the FCC Flexbox course twice. I stuck really close to the example layout so that I could reference that code when I ran into problems or didn’t understand why something wasn’t working the way I expected it to. I had a way different vision for this in my head so I plan on revisiting and revising this page as my abilities expand. Let me know what you think! :slight_smile:

https://codepen.io/TimeIsOnMySide/full/mjqBae/

I think that the flexbox stuff is fairly well-executed here. The big think that jumps out to me as an opportunity for improvement is replacing literally all values using pixels from the page and using percentages or em/rems for a smoother responsive experience, particularly with text.

1 Like

Not giving any money for that :slight_smile:

Why did you choose to repeat yourself in writing media queries for almost each of your styling like in here:

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  background-color: #999;
  @media (max-width: 650px) {
    flex-wrap: wrap;
  }
}

and in here:

.logo {
  width: 60vw;

  @media (max-width: 650px) {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
...
}

etc instead of just writing one/more media query/ies where you can modify any style you want?

1 Like

I guess I don’t have a logical answer for that. I built the page in sections and made it responsive before moving to the next section so I guess it was just easier for me to keep track of in my head and not get lost in the many lines of code. Is there a more efficient way & if so could you explain it?

Thanks for the comment!

Totally see what you mean! Is there a unit that is most commonly used (like an industry standard) or is it just personal preference / case by case?

I think rems are best overall for scaling, and once you get used to converting them from pixels, they are very, very simple.

1 Like