Mobile-first design using Flexbox

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  @tbrownlee something you could do is set a specific size for the text container to fit into, this would eliminate the need to add padding to try and get the text to appear as it shows in the image provided. Since the container constrains the text, if it is larger the text will fill the available space, but if it is smaller it will wrap to the next line. This way you can adjust the size of the container to get the text to wrap or not wrap as you would like.

  Something I noticed in your code is you used rem in some places and px in other places was there a reason for going back and forth?

  Lastly I noticed several times in your CSS file you would select elements directly like so

  p { margin-bottom: 82px; line-height: 1.7rem; margin-right: 21px; }

  While this works just fine for a one component solution like this, it would really mess up any projects you do in the future that have more than one component, as this would not only affect the paragraphs of this component but all of them on the same page. I would suggest either giving them a class name, or using a more specific selector like you did a couple of times. Here's an example from your code.

  .third-section a { color: var(--very-dark-cyan); border: 2px solid var(--very-dark-cyan); }

  This is much better as it will only affect the anchor tags that have a parent with the class "third-section" instead of all of the anchor tags on the page.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  tbrownlee•350

  @tbrownleePosted over 2 years ago

  @12Kentos Ok in the future I will sure to target elements more specifically so I can start good coding practices now! I fixed the code to specifically target elements.

  On the rem/ px question, there is no reason but for margins/padding I can envision how big a pixel is. However, I would like to code the correct way. If I use rem, should everything else be rem too? Margins, padding, width etc?

  On the text fitting where I want it, you mean give the text a width? I changed from targeting every p element to giving the p elements a class: .car-description. So, in this case, the best option would for me to give .car-description a specific width?

  I appreciate your advice!

  0

  

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  @tbrownlee there isn't really a cut yes or no answer to what unit you should use. For instance in some cases it is better to use vh or vw or in another case it is better to use % or rem, or em. Here is a good video you can watch (it's like 6 minutes) on when to use what unit.

  Kevin Powell

  Additionally I understand where you are coming from with the rem perspective. It's a lot easier to say I want this to be 30px rather than trying to do the math of what that would equate to in rem. However if you want to avoid doing math there is a really nice piece of code you can add that will fix this problem.

  html { font-size: 62.5%; }

  This will set the base font size to 10px, making the math a LOT easier. This way 10px is equal to 1rem, 5px is equal to .5rem etc...

  Yes that's exactly what I would do, you can add a max-width to the .car-description and that will help constrain the words to make them line up properly like in the image. If you aren't sure what the difference between max-width and width is, a quick google/youtube search will help. Let me know if you have any other questions!

  Marked as helpful

  1

  

  tbrownlee•350

  @tbrownleePosted over 2 years ago

  @12Kentos you just enlightened me with the 62.5% trick. I'll be sure to add that to all future code!

  Also, I added max-width to my code and it works great!

  I'll let that video sink in for future sizing as well.

  Thanks again for the advice!

  0

  

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  @tbrownlee No problem glad I was able to help! :)

  1