Stats Challenge Solution

Community feedback

• 

  Rafal•1,395

  @grizhlieCodes

  Posted about 4 years ago

  Hi Denzell, thanks for your solution! I had a look and I think this is a great opportunity to learn about a few concepts that I wish I was made aware of sooner.

  The issue with using positions relative and absolute is that this breaks the normal document flow. You're telling the brower to ignore the usual rules of layout for the select elements. But the remaining elements won't respect this new 'order' of the absolutely-positioned elements so it'll become a mess unless the position absolute is for a tiny styling adjustment, some background-shape position or a 1px underline for a <p>, etc.

  I have a suggestion for this particular project as I think it's a great way to learn (redoing projects to really encapsulate some new concepts, see before and after). For context I redid the entire Designo project from FEM. I learned more on that project about hmtl/css than any other. Anyway:

  1. Re-code the project mobile-first. Start with the mobile design. The purpose for this is simple: it is easier to start simple and increase in complexity, than it is to start complex and decrease complexity via media queries. This is a pattern you will find in just about anything.

  2. For the media queries use min-width.

  3. Try using clamp to size your text with, it's quite amazing how so little code can add so much responsiveness. This video from Kevin Powell nicely covers clamp I think. Play around with it in codepen is my advice :). This tool is also nice to help you figure out that middle value in clamp (you will know what I mean after you learn a bit about it).

  4. For positioning of the text/left side of this card, just use flexbox. Don't use position relative/absolute. If you want any advice specific to any part of this project just narrow it down for me and i'll go through anything you might need in detail. (like what desired behaviour you are looking for and what is happening currently could help :) )

  5. This piece of advice may sound weird at first so I'll expand a bit on it afterwards: try not setting a height anywhere but the body. So do the typical body { height: 100vh; width: 100% ; /* other code you have*/ and then don't set the height for the card. Instead allow your content, in this case it will most likely be your text, to set the height of the left side. The image may need a height as a 100% or something along those lines. Perhaps you can use object-fit and object-position for the image.

  I noticed you set a lot of heights: 100%. This is mostly unnecessary. If you take a peek at this project I did you will notice that I used height once, for the body. And hopefully you'll agree that this solution is more or less pixel-perfect (I wasn't going for pixel perfect mind you). I was simply going for making sure that the font-sizes, line-heights, paddings, margins and flex-gap or simply gap these days were correct.

  The reason for thinking this way is because lets say your data/html is coming from another source, an API lets say or you don't know how much text there is in something. So touching height immediately creates a potential problem: what if there is too much content for the height to handle? This is where 'content-first' thinking comes in handy. You allow the content to dictate the height after a few adjustments to the content directly. That way whether you add 1 or 50 more words, nothing will break. It's also just a cleaner way of coding I think.

  All in all, I'm trying to share some simple fundementals of responsive layout. Give them a go if you want and see how you fare. I'll be happy to re-review anything in more detail if you'd like then. At the moment I think it's a good idea to redo this project and try using some of the above 'tools'.

  I say this after having redone the Designo project from scratch.

  18

  Marked as helpful