Submitted 5 months ago

Responsive Flex-Grid

Abigail Figaro•290

@abigailjulie

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?

Better time using flex box, still need more practice.

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

Never figured out how to position the picture properly.

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

Semantics, z-index, overlapping margin/padding and most of all I want the cards to adjust properly as the page is shrinking. I don't want to rely on media queries for a set px.

Please log in to post a comment

Community feedback

hitmorecode•7,240

@hitmorecode

Posted 5 months ago

Nice well done, but there are a few issues that you need to fix.

A web page can only contain one h1 element, you have four h1 elements on your page. Keep one and change the rest to something else.
Make it a habit of building your html like this. Here you can find an article about semantic html Semantic HTML

  <body>
    <main>
      <section>
        // card content 
      </section>
      <section>
        // card content
      </section>
    </main>
  </body>

Don't wrap a <section> inside a <div> it should be the other way around.
I know sometimes it's hard to name classes and id's, but try to give them a more meaningful names.
Make it a habit of doing your CSS reset like this.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

There are a lot of repetitiveness in your CSS, when writing CSS think of DRY Don't Repeat Yourself.

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: rgb(255, 255, 255);
  font-family: "Barlow Semi Condensed", sans-serif;
}

body {
  background-color: rgb(236, 242, 248);
  margin: 1rem;
  padding: 0; // you already used padding: 0 inside html, you don't need to use it here also.
}

This also applies for margin you have margin: 0; inside html and you are repeating this on other places.
When you have an element with a class or id, whenever you want to target that element you just have to target the class name or id of that element.

// having description twice is not necessary, this can cause problems later on. 
.card3 .description,
.card4 .description {
  color: rgba(25, 33, 46, 0.7);
  line-height: 1.35rem;
}

// do this instead. with this every element with class description will be targeted.
.description {
  color: rgba(25, 33, 46, 0.7);
  line-height: 1.35rem;
}

There is a conflict in your CSS

// here you are telling CSS to do this with description
.card3 .description,
.card4 .description {
  color: rgba(25, 33, 46, 0.7);
  line-height: 1.35rem;
}

// here you are telling CSS to do something else with the same description as above
.description {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45rem;
  margin-bottom: 0;
}

When writing CSS keep in mind that CSS reads from top to bottom. The next rule will overrule the previous one. The order how you write CSS is very important. This is what I mean.

p {
  color: red;
}

p {
  color: blue;
}

// the second rule will overrule the first one the p tag will be blue and not red.

Your page is not responsive, try to fix this.

My suggestion is to re-do it again and try to fix all the issues that you have. If you have any questions regarding this let me know. I hope you find this helpful. Keep it up 👌👍

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