Is this 3 Column Preview challenge as clean as possible?

Community feedback

• 

  Yemisrach•1,430

  @Yemisrach15Posted over 2 years ago

  Hi Skippy, good job with this challenge!

  Although I can't answer you question about the h1, I have some other feedback.

  • As you can see here, the content is not fitting in the viewport width (>768px). Look into the max-width you set on main.

  Marked as helpful

  0

  ---

  

  Skippy•110

  @skippysworldPosted over 2 years ago

  @Yemisrach15 I do understand your point. The solution is now created to be somewhat perfect for small devices (375px) and desktop (1440px). Somewhere in between it might look like the screenshot. My guess on your suggestion would be to use '%' or 'vw', which breaks a little the desktop size (1440px). That would require to be fixed afterwards using a second media query. Is that what you're suggesting?

  0

  

  Yemisrach•1,430

  @Yemisrach15Posted over 2 years ago

  @skippysworld Yeah. I'm more comfortable with % so I would use that. The cause of the break might be min-width: 300px on .section. The max-width on main is not the problem I was wrong. Try this

  1. Remove min-width from .section
  2. Give percentage width to main
  3. To correct the uneven height at around 1000px viewport width, set align-self: stretch on all .section

  With the steps I wrote above, there is no need for another media query

  Marked as helpful

  1

  

  Skippy•110

  @skippysworldPosted over 2 years ago

  @Yemisrach15 Yep, I see. I edited CSS locally and see the result. On 1440px it results with wider components (because %) but I get the point. It would be managable with already mentioned another media query.

  Previously it was rather "hard coded" using min-width: 300px on section selector. I set that because of different heights of the columns when width of viewport was for example 870px. When I use align-self: stretch instead it solves the entire thing by itself. I'll need to fix different vertical position of a buttons though so it's not jumping up and down uncontrollably.

  I need to get more into percents and vw / vh though. You have anything to recommend on that? I better understand the topic on practical examples than more or less theoretical MDN.

  0

  

  Yemisrach•1,430

  @Yemisrach15Posted over 2 years ago

  @skippysworld Other than searching it on google, none sorry. Push through the MDN docs though

  1
• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  @skippysworldfirstly there is no problem at using H1 tags , secondly I like the commenting style used in the reset.css file .I would like to give a suggestion for a small project like this one is it not better to use one file for CSS that includes all the styling. Otherwise great work you deed

  1

  ---

  

  Skippy•110

  @skippysworldPosted over 2 years ago

  @DrMESAZIM Hi! Actually the reset.css and commenting inside is not my work. It’s one of the many CSS resets out there (on the first line I think I mention the author).

  Therefore I let reset.css alone and created my style.css aside :)

  Using h1 tags - as far as I remember, it’s not possible (or good practice) to use more than one on each page - here I have three headings that looks the same within very similar sections. That’s why I’ve decided to choose to hide h1, keep it present for screenreaders and used h2 for sections.

  0