Responsive Background Image

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Currently, the layout for all screen is too small. Did you mistakenly code this while you are zoomed in and making it appear large on your end? It would be really nice for the sizes to be adjusted on this one:>

  For some suggestions, here are some:

  • Those star-icons, they could just be used as a value for the background property since the background could contain multiple images and on this approach, you will be able to avoid creating extra html for the stars.
  • Also just to point something out for img tag. You will only want to use a descriptive alt value if the image is meaningful and adds content to the site.
  • Those text on each of the ratings could just be a p tag since there are no other contents on each of the section where a heading tag could give an info to.
  • For the testimonial cards container, it would be nice to change the section tag into just div. section tag is not informative as a landmark unless it is labelled using aria-labelledby to which points to a hidden heading tag. But if the section or the part of the layout where you want to use section have its own heading tag, then you can use section.
  • For each of the testimonial card, I suggest using this markup below so that user can navigate the information properly using blockquote:

  <figure>
    <img src="" alt={person name}>
    <blockquote>
      <p> {qoute in here}</p>
    </blockquote>
    <figcaption>
      person name
      <p>
        person role
      </p>
    </figcaption>
  </figure>
  

  Though for this one, you will want to use display: grid so that you could place each item in the figure tag properly like the ones on the design.

  • The "verified buyer" text is not really a heading tag since it doesn't give information on what a section would contain. Using p tag on it would be really nice.
  • Lastly, addressing the layout's size. Tinkering some css will be really awesome:>

  Aside from those, great job again on this one.

  0

  ---

  

  Dolapo•160

  @AdezaynPosted almost 3 years ago

  @pikapikamart Thank you so much for the detailed feedback and correction. I was schooled especially on how to use semantic HTML tags. I will work on the corrections.

  1