Four Card Feature Section (First Project)

Community feedback

• 

  Brittney Galloway•95

  @brittgallowayPosted over 4 years ago

  Hey! I can't speak to the best practices of the media queries, but is a little odd to have many when you are basically only changing the font size.

  In regards to the font size, stick to one unit of measure (2 max). You used px, vw (which I wouldn't suggest for font, it is view-width where each number is similar to a percentage of the screen) and rem. It seems you want a good font size for multiple screen sizes, so I suggest using em or rem, because it will alter the size based on the screen. It will definitely cover the difference between 375px to 550px screens and 1000px to 1440px, which in you case will reduce some queries.

  Nice job!

  0

  ---

  

  Matthew Szanyi•35

  @Szanyi95Posted over 4 years ago

  @brittgalloway Yeah it's just the title (h1) was HUGE on mobile so I changed it to that. When I used rem it still was way too big. vw seemed to work nicely as it scaled a bit better with the page.

  I used px on the body as that was requested in the project spec.

  I'll revisit it tomorrow and make the size units more consistent. Only thing is how would I used less media queries for 375, 550, 1000 and 1440? They'd all have to be separate queries wouldn't they? Unless there is some simpler way to do that I'd be interested to learn.

  0

  

  Brittney Galloway•95

  @brittgallowayPosted over 4 years ago

  @Szanyi95 What I mean to say about the media queries and the fonts is that using vw, or rem, or em is meant to be responsive. So it is odd to use them and still change the font size in every breakpoint. The breakpoints main function to handle layout changes. In this project there are only 2 layouts, so only 2 breakpoints are really needed. Extras are only needed if something "breaks". but even then, if you have the time, you should find out why it's breaking and improve the html/css instead. It just makes the code cleaner and more shareable. Big picture, on a more complicated layout, adding breakpoints when a page starts to look crowded (or empty) it is good add media queries to have a polished, finished look. On simple layouts like this it just adds a lot of work, makes it harder to read, and barely makes a difference to the user.

  Can I ask why you wanted so many media queries?

  And I did some research, it's fine to use vw with font haha, I just hadn't seen it before, and before reading about it, thought it wasn't typical. But it's fine, especially on headers like you have it.

  0