responsive design using positioning

Community feedback

• 

  P

  James•340

  @james-work-accountPosted over 2 years ago

  Your solution needs some content landmarks - the .box div should be inside a main element and your .attribution div should be a footer. This is for accessibility reasons, as it tells assistive technologies (e.g. screen readers) where everything is and makes your site easier to navigate for someone with disabilities (plus it will remove a lot of your Report issues).

  This project doesn't really require relative positioning - have a look into positioning elements with flexbox. For example, on my screen everything is off-centre since everything's positioned with px values (have a look at your solution from sizes in-between and either side of the given screen sizes in the design files). You should be able to use flexbox and not need any media queries at all, since the element won't stray from the centre of the screen.

  You may want a max-width on your .box but shouldn't be setting hard widths on elements - for this challenge it doesn't matter as much, but if someone has a very small screen, or they are viewing the website split-screen (with something else next to it), etc, your elements will overflow off the edge of the screen. Same goes with height - you may need a max-height, but generally you'd have the height dictated by the container's contents.

  This is a good start. I suggest you challenge yourself to rewrite your CSS removing all media queries and fixed heights/widths, whilst keeping the solution looking the same. Good luck!

  0