7-column-preview-card-component CSS HTML NEWBIE

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Cookiemonsterhxc! 👋

  First, I recommend using a code-formatter. This way, your code base will have a consistent format, which makes it easier to read the code. I suggest using Prettier as your code-formatter.

  Prettier · Opinionated Code Formatter

  About the issue, if you take a look at the design, you should see that all the buttons have white background color at first. Also, the text color of each button is the same as the card's background color. So, you need to fix the styling for the initial state.

  Then, for the hover state, you should set background-color: transparent and change the text color to white for all the buttons.

  Here are some other suggestions for improvements.

  • Replace all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
  • The car icons are decorative images. So, you should leave the alternative text empty.
  • Style the <a> directly instead of wrapping the anchor tag with a <div>.

  For your next project, I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

  Related resources:

  • How-to: Accessible heading structure - The A11Y Project
  • Quick tip: Using alt text properly - The A11Y Project
  • Avoid these common alt-text mistakes - Scope for business
  • Responsive design ground rules | Polypane

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0

  ---

  

  Cookiemonsterhxc•200

  @CookiemonsterhxcPosted almost 2 years ago

  @vanzasetia Thank you very much

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @Cookiemonsterhxc

  No problem! 👍

  0