Responsive Layout using scss and mobile first approach

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Ramiro,

  This is a really helpful guide to help you create the triangle shape with the use of a pseudo-element.

  Your design looks great on desktop but transitions very oddly to mobile. It's best practice to steer clear from setting fixed heights and widths. The height should be determined by the content and the width controlled dynamically with max-width.

  Here are some really useful resources that might help with responsive web design:

  • A Complete Guide to Flexbox - css tricks
  • Learn Flexbox for free - Scrimba
  • A Complete Guide to Grid - css tricks
  • Responsive Web Design - freeCodeCamp

  But overall really good work and keep coding!

  Marked as helpful

  0
• 

  nics•110

  @niccalaodenioPosted almost 3 years ago

  don't use the <ul> tag to contain an <img> you can use <div> as container

  Marked as helpful

  0
• 

  nics•110

  @niccalaodenioPosted almost 3 years ago

  you can use position property so that it can be position properly, set the container to relative then absolute for the element that contain the number which is the 185 GB left. then if it is positioned well you can apply the ::after pseudo element to put the triangle. Hope I can help, thank you! You can check my solution, just visit this link https://github.com/niccalaodenio/fylo-data-storage-component-master

  Marked as helpful

  0