Is this 3 Column Preview challenge as clean as possible?

@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?

@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

@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.

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

@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.