Responsive 3 Column preview with HTML and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks fine, it is just bit smaller but it's fine for now, the responsiveness really needs an adjustment on this one since the layout is really squished before mobile transition. Also, do not use 375px as a breakpoint, that and the 1400px are just the size where the design is made and not the breakpoint. Also it would be great for you to start with mobile first workflow as this will make your layout more adaptable.

  Some other suggestions would be:

  • It would be great to have a base styling with:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This will make your element easier to handler. You can search up more about box-sizing: border-box;

  • Always have a main element to wrap the main content of your page. On this one, the #container should be using the main instead of div.
  • Also, I saw usage of id for selecting an element, don't, it is a bad practice because of css specificity, use class to select an element.
  • Each car icons are just decoration so hide them. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "icon" and others. An img is already an image/graphic so no need to describe it as one.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element. Have a look at Grace's solution on this inspect the layout and see how she used the h1 and the styling applied to it, copy that since you will use that a lot.
  • I would use a tag instead of button because it looks more likely a link to "learn more" rather than button to control something.
  • The .attribution should be inside a footer so that it is contained inside a landmark element.
  • Lastly, just the responsiveness and mobile layout breakpoint to be adjusted.

  Aside from those , really great work again on this one.

  Marked as helpful

  0