Mobile first design using flexbox and grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  I forgot, you can take a new screenshot of your solution. Maybe that will help your case!!

  Marked as helpful

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, good work on this one. The layout both desktop and mobile is good. Though at point 1120px going down to the mobile layout breakpoint, the screen are now hiding the elements, thus creating a scrollbar.

  Some suggestions would be:

  • it would be great to always include a main element on a website. This will wrap all the element that would be part of your site, but make sure you are not nesting the header if you have a heading like navbars, and footer element. The structure would be:

  header
  main
  footer
  

  • the text Reliable, efficient delivery Powered by Technology could be wrap in a single h1 element. Then you could wrap the second text in a div or span and style it so that it will be below the first text.
  • the text after the text mentioned above is most likely to be p tag rather than h3.
  • the heading text on the 4 boxes could have been only using h2 tag. Also when creating website, even if you didn't do it in here, thankfully, remember to not jump from a heading tag, with 2 levels. Like starting from h1 then the next heading tag is h3 or h4. Increment only by one.
  • the text below the heading of the boxes should be p tags and not heading. Remember to only use heading tags, where you think a text is a topic that gives overview to a content or a text.
  • the alt text on the images could be left empty since they are just purely decoration.
  • lastly, just for grid additions, since you are using display: grid maybe you can create like for example a 2x2 layout before transitioning to a one straight boxes. That would be awesome.

  But still, good job on this one. But remember those about heading tags.

  Marked as helpful

  0

  ---

  

  ccbdp•315

  @ccbdpPosted about 3 years ago

  @pikamart Hey! Thank you so much for taking your time to comment and give suggestions on how I can improve! I would definitely take into account everything you stated to improve projects moving forward! I appreciate it!

  0