Skip to content
OverviewSolutions
18
Comments
5
Nader
@youtubbeh

All comments

  • mohammed abdo•220
    @Hazard-58Submitted over 2 years ago

    I struggled with desktop responsivity , the code is a mess but I can't make it better, any advices will help

    four card component

    1
    Nader•300
    @youtubbehPosted over 2 years ago

    Hi Mohammed, On first impression, looks good to me! There are some things you can improve, though:

    • There are some typos on your text: MOnitors, avaluate, taent.
    • Using semantic html tags. I would suggest you use <main> instead of <div class="container"> for your main container. <main> is a semantic html tag that better informs the browser what the content is about.
    • Use h2 instead of h3 because you shouldn't skip h tag orders. This is also a semantic html best practice.
    • Be careful to include <alt> tags for accessibility on your images.
    • On mobile, your boxes look a bit squeezed, I would suggest you make the main container's width a bit smaller when screen width gets to 400px or lower. You can do this by adding a media query and in there setting a width for the main container: @media all and (max-width: 400px)...
    Marked as helpful
    1
  • Nader•300
    @youtubbehPosted over 2 years ago

    Hi Michel, I would suggest a couple of things:

    • Be sure to add some padding to your <main> tag because your content is right on the border, which makes for not such a good user experience.
    • You have an accessibility issue with the links on the attribution footer. The color doesn't contrast well with the background, so people can't read the text well. You can just add a color property to your <a> 's on CSS
    • You're using 2 divs with 2 different id's to structure sections 1 and 2. There's a better way to do this, using the <section> tag with a class or id. And you can ditch the divs. Why is this better? It's good practice to use semantic tags whenever possible, as these tags tell the browser what the content is about, and also is easier to read by collaborator coders (example: <section>, <footer>, <main>, <header>, etc. instead of divs). You can apply this concept to other divs you have, when possible.
    • The social media logos are not centered in their circles. For a better aesthetic, I would either center them or remove their circle borders (much easier).

    Nice form btw!

    Marked as helpful
    0
  • Nader•300
    @youtubbehPosted over 2 years ago

    Thanks!

    0
  • Nader•300
    @youtubbehPosted over 2 years ago

    Thanks a lot Alan!

    0
  • Nader•300
    @youtubbehPosted over 2 years ago

    Thanks Favour! About making it responsive, I don't think I need to because the main element is smaller than a phone screen, centered vertically and horizontally, and positioned as absolute, so it will always fit. Although I haven't tried it on a horizontal mobile device. Is it best practice to always use @media-queries in CSS regardless of this? Let's say, as a caution measure.

    0