Using `picture` tag to change image between screen sizes

Community feedback

• 

  Hamzat Lawal•560

  @EngineerHamzieyPosted about 2 years ago

  hello Fareem Mohamed you have done a great job here are my suggestions

  • I observed that the left and right part of the desktop version of the page is cut off on a smaller screen add some margin to the left and right (will fix this the page won't disappear to the edge of smaller screen)

  • I observed that you removed the div.attribution, if you will like to include it, you can place in a footer tag to make it accessible(or in order words "avoid accessibility issues")

  • avoid using px as much as possible to avoid responsiveness problem, use units like rem and em for widths, height(you min-height 100vh is cool and is an exception), font-sizes and others.

  • the answer to you questions are in this links below, here is the link to my own solution with alot of explanation in it and here is the code with explation on github

  I strongly hope you find this helpful 😊

  Marked as helpful

  1

  ---

  

  Fareem Mohamed•90

  @faryyymPosted about 2 years ago

  @EngineerHamziey Thank you so much for suggestions and yes, they are helpful.

  I do have margin applied to the main container (which is an article tag), but it doesn't seem to have an effect. Maybe it's the fixed width for the <picture> that's messing up everything.

  I removed the attribution div as it was messing with the layout but I have realized what I was doing wrong and found a way around it. You're right. I shouldn't have just commented it out.

  I am slowly learning how to implement relative units using them more and more as I go along.

  I'll be sure to checkout your solution for this challenge and retry the challenge sometime in near future.

  Thanks again Hamzat :)

  1

  

  Hamzat Lawal•560

  @EngineerHamzieyPosted about 2 years ago

  @faryyym ok good, Also you can easily convert px to rem by dividing by a value of 16 eg: 15px = 15 / 16 = 0.9375rem....for the font size. Happy coding 😊

  1