Mobile first with Grid & Flexbox

Community feedback

• 

  Samuel Palacios•615

  @samuelpalaciosdevPosted almost 4 years ago

  Hello Nate, hope you're good!👋

  I've been seeing your source code, and as I imagined, you put some predefined width for your header text container element (.hero-body) , using predefined widths usually is not the best alternative, it could cause you a lot of problems when talking about responsiveness.

  Regarding your question, I saw that yout put the font-sizes using em units, they aren't the best option to set font-sizes, and maybe could case you some problems. I would change the (.hero-body p) font-size to= 16px, remove the predefined width on the (.hero-body) and change it for an max-width of 550px. Also I would change the (.hero-body) padding to 2em 1em; to scale better with the design.

  I suggest to see this video about css em units: https://www.youtube.com/watch?v=pautqDqa54I&ab_channel=KevinPowell.

  0

  ---

  

  Samuel Palacios•615

  @samuelpalaciosdevPosted almost 4 years ago

  Also I Just noticed you use two different heading tags to style them differently, a better practice commonly used is to used a span element instead in this case the h2 tag, hope this suggestions can help you

  0

  

  P

  Nate Northway•190

  @nnorthwayPosted almost 4 years ago

  @samuelpalaciosdev Using a percentage to define width is definitely the way to go when trying to make something responsive for sure. But getting the right line wrapping was difficult without setting an explicit width. I could have figured out the percentage/vw, and probably should have, but I think this works fine.

  Usually I don't use px for much, other than borders, defined font sizes, and box-shadows/filters. Setting a max-width rather than a strict width probably is a good idea.

  In regards to using different tags for the header, using spans isn't semantic.

  0