Submitted about 1 year ago

Testimonials Grid Section Main

parkerrn9•210

@parkerrn9

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

I'm looking for feedback on my 'Testimonials Grid Section Main' project, and I'm particularly interested in your insights in the following areas:

Layout and Responsiveness: I want to ensure that the layout of the testimonials grid is visually appealing and that it works well on various screen sizes and devices. In particular, I've noticed that in the mobile version, it may be necessary to increase the viewport height to fully view the design, and I'd appreciate feedback on this aspect.
CSS Styling: I'd appreciate feedback on my CSS techniques, including the styling of elements and any opportunities for improvement in terms of design and aesthetics.
Code Organization and Structure: I'm keen to know if the code is well-organized, efficient, and follows best practices. Please provide insights on the logical structure of my code.
Accessibility and User Experience: Any suggestions related to improving the accessibility and overall user experience of the project are highly valued.

-- Any Specific Enhancements: If there are specific aspects or features you believe could be enhanced or refined, please share your thoughts.

Your feedback will greatly assist me in refining this project, and I'm eager to learn from your valuable insights. Thank you in advance for your help!

Community feedback

Mtalafa•350
@MtalafaPosted about 1 year ago
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.
0
parkerrn9•210
@parkerrn9Posted about 1 year ago
@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.
0
Mtalafa•350
@MtalafaPosted about 1 year ago
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;
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord