Responsive Design Using Flexbox and CSS media queries.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout is really lot smaller than the design but it respond well though which is great, the mobile state looks great as well just needed those to be centered.

  Zayat gave a great tip on this, just going to add some suggestions as well:

  • Always have a main element to wrap the main content of your page. On this one, the .main-container should be using the main instead of div.
  • Also on your .main-container don't use height: 400%; you don't need to add a height on this, let the element inside it give the container its proper dimension. Doing this, you are just limiting the element's size/height.
  • Website-logo img should be using the website's name as the alt like alt="clipboard". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Other img element could use a more proper alt text, since for every image devices, there is the clipboard app logo, you could use like clipboard application on a desktop device something like that, more descriptive.
  • When using heading tag, make sure you aren't skipping a level. If you use h4 make sure that h1, h2, h3 are present "before" it.
  • The 3 icons before the company logos should be hidden. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Use only the name of the company for each company logo like alt="google".

  FOOTER

  • Your .footer should be inside the footer element not the .attribution.

  • Website-logo-image should use proper alt like what I mentioned above.

  • The 5 links could be inside a nav element since those are still your websites' navigational links. Also they could be inside a ul element since those are "list" of links. So a ul inside of a nav.

  • Social medias could be inside a ul since "list" of links as well.

  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.

  • Each img of social-media should be hidden, use the method I mentioned above as well.

  • Lastly, just the other section's text-content to be centered on mobile state.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Darshan Pandya•420

  @Darshan-Pandya10Posted about 3 years ago

  @pikamart thank you ! I really appreciate your support and yeah I will surely work on it to improve. Thanks again

  1
• 

  Zayat•310

  @Z-ayatPosted about 3 years ago

  Quick search (benifits) section should be text-align-center; and in web view you can give the img position:relative;and left:-xxpx; till you get it as the design otherwise you did well ❤️

  Marked as helpful

  1