@ApplePieGiraffe
Posted
Hey there, again, Marta! 👋
I think you've done a good job on this challenge! 👍 Your solution looks good and is responsive! 👏
I suggest,
- Adding a
max-widthto the main container or wrapper to prevent the content of the page from becoming too wide on extra-large screens. - Adding
overflow-x: hiddento thebody(or something similar) to prevent a horizontal scroll bar from appearing along the bottom of the page when the screen width decreases in the desktop layout. - Horizontally centering the content of the page in the tablet layout (just below 768px), which you can easily do by adding
margin: 0 auto;tosection.wrapper.
Keep coding (and happy coding, too)! 😁
@martam90
Posted
@ApplePieGiraffe thank you for your feedback. I wonder if by adding max-width do you mean percentage width of 100%? Or in that cases it is better to use precise width of let say 1200px? Thanks!
@ApplePieGiraffe
Posted
@martam90
If you add width: 100% to the section.wrapper, it'll take up 100% of the width of its parent element, which is in this case, the body. That's good for layouts that are 1440px wide and below, but if the section.wrapper is still 100% of the width of the viewport at around 1900px, things begin to look rather far apart and a little stretched. That's why if you add max-width: 1440px (or something similar) to section.wrapper and center it in the viewport using flexbox or auto margins, there'll simply be blank space to the sides of the content and the design won't be stretched or anything on extra-large screens. 😉
