HTML AND CSS

Community feedback

• 

  Davide•1,725

  @Da-vi-dePosted over 3 years ago

  Hi Danielle, no bad result but there are some things i don't like in your code.

  • I noticed the background-color in a div, you don't need that, also you shouldn't style that class (no width and height), you can set the background-color in the body because it's the entire page which is where you want to see the background. Never set the width and height in that way, especially in the media query, that is not a good practice, this was a basic challenge and nothing bad happened but in the future you can have hard times.

  • In the media query you don't need to repeat all the previous code, just put what changes from that width on. Take the habit to work with the developer tool open and the responsive mode activated so that you can understand exactly what's going on.

  • I suggest you to use rem unit for font-size and em unit for everything else, px doesn't make good accessible content.

  Hope it helps. Keep coding :-)

  Marked as helpful

  2

  ---

  

  Danielle Meer•20

  @ALGOREX-PHPosted over 3 years ago

  @Da-vi-de thankyou for your feedback i will fix it first before proceeding to the next challenge

  0
• 

  Stefan Kremenovic•225

  @kremenovicPosted over 3 years ago

  Hi, I would recommend you to start using width: 100% instead of let's say 1580px; You may use max-width: 1500px; width: 100%; that way your code will be responsive, and it will be easier to fix some styling issues for the mobile devices.

  This is how it looks like on my laptop, and I added 100% to fix it > http://i.prntscr.com/zFSYMmiaRzyFmaK31yaqpw.png

  The next thing is your HTML structure, please take a look > http://i.prntscr.com/YkcfSNcnQneGLh9DFikTQA.png

  This should be in one container(div), and inside of that container, you would have 2 columns. So the content goes inside of those columns, and it would be easier to position them using display: flex. I see you were using position: absolute with padding 781px and that's a big no-no in my opinion.

  Next thing, attribution comes last in your HTML structure, but on the desktop, it's on the top, and for the mobile, it's on the bottom as it should be, so try to fix that.

  Oh yea, the .picture div goes of the text so there is no chance to select the text if you want to copy or to mark it or to inspect that element. It will inspect the picture, and the reason for that is the padding-left that's pushing the picture.

  I hope this will help you.

  Marked as helpful

  2

  ---

  

  Danielle Meer•20

  @ALGOREX-PHPosted over 3 years ago

  @kremenovic ok thankyou i will fix it as soon as possible

  0