Responsive design with pure CSS

Community feedback

• 

  TOCHUKWU UCHE•280

  @Toch007Posted about 2 years ago

  Hey there, You did such a great job. It looks so great. I love the way your code is outlined, it looks really nice. The only issue I have with your code is your "img" tag on your HTML. It's best practice for all your img tags to have the "alt" attribute even if it's empty, just make sure it's there. Then the other thing is that you gave your first img tag a width of "100%" which is wrong. The default measurement for the width and height of pictures on HTML is in PX (Pixels) and the px should not be indicated. For example, <img class=border-rad src=images/image-equilibrium.jpg alt=equilibrium width=100>, the (width ="100") there means that the width of the picture is 100px, the px should not be indicated on HTML. Asides from this I believe you are good to go. Keep up the good work.

  Marked as helpful

  1

  ---

  

  philale•350

  @PhilalePosted about 2 years ago

  @Toch007 Thank you for your feedback! I tried changing the width, but it seems to be working. If I set width=50% as an attribute of the image, the width of the image is 50%. It also works with other values.

  1
• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi, Philale.

  It's quite interesting case you have here. I was curious myself as to why <div id="img-main"> is taller than its content. Then I've played and tried several css declarations, until I realize that in order to remove the extra pixels, we have to give <img class="border-rad"...> a particular style: display: block;.

  And I've googled about why this happens. The answer lies in this stackoverflow question. You can also check this other question for a bit longer explanation about this.

  Hope this helps.

  Marked as helpful

  1

  ---

  

  philale•350

  @PhilalePosted about 2 years ago

  @amalkarim Thank you for your help, it works now!

  0