Submitted 24 days ago

I used CSS grid, flexbox, and custom fonts to style the layout.

Akshay Gir•40

@akshaygir15

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of the clean, organized grid layout and the effective use of typography and image styling. Next time, I’d focus on enhancing responsiveness with media queries for mobile devices or by utilizing Bootstrap to adjust the layout, and also improve accessibility by incorporating more semantic HTML.

What challenges did you encounter, and how did you overcome them?

The challenges I encountered were:

Achieving consistent box sizes for the grid created with <div> tags.
Applying the correct shadow effect to the main container.
Adjusting the spacing and font height accurately.
Ensuring the correct height and width for both the <body> and the main container.
Positioning the quotation symbol behind elements using the z-index property, making it closely match the design.

What specific areas of your project would you like help with?

I would like help with two specific areas of my project -

1.Adjusting the box shadow effect to ensure consistency across all testimonial boxes in terms of direction, intensity, and spread.

I’m looking for guidance on implementing responsive design using either Bootstrap or media queries to ensure the layout adapts smoothly across different screen sizes.

Community feedback

Jayco•330

@jayco01Posted 24 days ago

I noticed that the website isn’t responsive on smaller screens. On mobile devices, the layout doesn't adjust, which causes the content to overflow or appear too small. To fix this, you need to add a @media query to adjust your grid layout for mobile screen sizes.

Here's an example you could add to the bottom of your CSS:

@media (max-width: 768px) {
  .container-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem;
  }

  .box {
    width: 100%;
    margin: 1rem 0;
  }
}

This makes the layout stack vertically and ensures that each card fits within the mobile screen. You can also adjust the padding and font sizes as needed.

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