3-column preview card | stuck...again

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there!👋 Here are some suggestions to help improve your code:

  • The car images/icons in this component are purely decorative; They add no value. So their Alt Tag should left blank and have an aria-hidden=“true” to hides them from assistive technology.

  • The incorrect font-family is being used on the headings. You will want to check your "style-guide" to download the correct one.

  • Adjust the padding and font-size of the component as the screen size decrease to better accommodate the smaller screen size.

  • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  funupulu•120

  @funupuluPosted about 2 years ago

  @vcarames read my EDIT i have no idea why media query isn't responding. help?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @funupulu

  Remove (orientation: landscape).

  With that property, the device needs to be in landscape mode for the media query to work.

  Marked as helpful

  0

  

  funupulu•120

  @funupuluPosted about 2 years ago

  @vcarames yes i agree and now my solution responds on desktop. But now, on my phone it doesn't respond. what's going on? it's the same code from another solution which works fine.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @funupulu

  It's woking fine. I checked on three devices ( iPhone 14 pro max, iPad pro 12.9 and ultrawide) your media query is working fine.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @funupulu, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  • Add the correct color for the background, that in this case is background-color: #F2F2F2
  • The html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.
  • The icon doesn’t have an important role when you think about semantics and the html structure. So you can add aria-hidden=“true” to avoid it being found and read in the accessibility mode/screen readers. These are only decorative items.
  • Use max-width: 100% for the cards in the mobile version to allow the cards grow 100% of the width considering the paddings and avoid to have a lateral gap (limited by a fixed width).
  • To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.
  • Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  0

  ---

  

  funupulu•120

  @funupuluPosted about 2 years ago

  @correlucas @vcarames read my EDIT i have no idea why media query isn't responding. help?

  0
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi funupulu, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  The rest is great!

  I hope it helps... 👍

  0

  ---

  

  funupulu•120

  @funupuluPosted about 2 years ago

  @AdrianoEscarabote @vcarames read my EDIT i have no idea why media query isn't responding. help?

  0