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!
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.
Not giving any money for that
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?
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.