Skip to content
OverviewSolutions
3
Comments
3
OL
@OlamideLanre

All comments

  • Carson Haskell•120
    @Carson-HaskellSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    CSS grid is incredible for building complex, responsive layouts. I learned how to utilize grid-template-areas to make incredibly flexible layouts, making it a breeze to move things around as needed. Using this simple setup:

    .grid-container {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: 1fr;
  grid-template-areas:
    "card-1"
    "card-2"
    "card-3"
    "card-4"
    "card-5";

  padding-block: 2rem;
  margin-inline: auto;
  width: min(95%, 70rem);
}

    All I needed to do was rearrange the layout in a media query:

    @media screen and (min-width: 70em) {
  .grid-container {
    grid-template-areas:
      "card-1 card-1 card-2 card-5"
      "card-3 card-4 card-4 card-5";
  }
}

    And just like that, you have two totally different layouts for mobile and web, both fully responsive. It truly is a beautiful thing!

    Also took advantage of CSS psuedo selectors to make styling the grid easier.

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

    Using all of the pseudo selectors, I ran into some styling conflicts and some styles overriding others and all that fun stuff. Thankfully I got it all sorted out pretty quickly!

    CSS Grid Testimonial Section

    1
    OL•40
    @OlamideLanrePosted 3 months ago

    Great stuff! I really like your design, almost the same as the actual design. I will be looking into the grid concept you used for this project!

    0
  • OL•40
    @OlamideLanrePosted 4 months ago

    Your work looks great! It looks just as close the design. Great job

    1
  • jkaps9•140
    @jkaps9Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    simplified my code

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

    hard to get the image to match the border radius, but i figured it out.

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

    there has to be a better way to get my content to line up, but for now i used align-self to manually align them.

    Preview Card Main with CSS

    1
    OL•40
    @OlamideLanrePosted 4 months ago

    *the image should be in the container div instead of a span, so when you display flex it automatically placed side by side with your product-details *use line-height css property to reduce the spacing between the bold text

    • next time do not give your main container a height so your items can grow or shrink with its size. In your solution the image is bigger than the div, making it seem like it's outside
    1