@Mtalafa
Posted
Hi there, Well done for completing the challenge, however it is totally unresponsive to smaller screens. So here are some suggestions: Remove the 'centered' class. To center everything you can add this on the body: display: flex; align-items: center; justify-content: center; min-height: 100vh; You should use CSS grid to solve this challenge. From the 'wrapper' remove: width: 350px; padding: 5em 0; Now add to the 'wrapper': display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); Now each of your 'person' boxes is a grid item, so you can lay them out one by one like in the solution. If you don`t know how CSS Grid works I recommend watching some videos and reading about it.
@parkerrn9
Posted
@Mtalafa,
First and foremost, thank you for your valuable feedback. I appreciate your input and have taken the time to review and address the issue you raised regarding the mobile design.
I did experiment with both Flexbox and Grid to center the wrapper. However, I encountered a challenge with positioning the quotes icon on person-one while ensuring it remains fixed in the desired location. The icon's position seemed to be influenced by the width of the viewport.
After some further exploration in response to your feedback, I managed to find a solution. To make the quotes icon stick to its intended position, I had to specify a height on the 'centered'. This adjustment allowed me to achieve the desired layout while ensuring the icon remained where I positioned it, regardless of the width of the viewport. Id be glad if you once again reviewed my changes the changes i made.
@Mtalafa
Posted
Hi @parkerrn9
Try adding this to where you bg image is: background-repeat: no-repeat; background-position-y: top; background-position-x: 70%; You can try out different percentages on the position x Also do everything that I told you before in my first comment and then you can place the Grid items the following way: person1: grid-column: 1 / span 2; person2: grid-column: 3; person3: grid-row: 2; person4: grid-row: 2; grid-column: 2 / span 2; person5: grid-row: 1 / span 2;
