Frontend Mentor | Responsive design coding challenge solution

Community feedback

@a-costas

Posted over 1 year ago

Hi there! Nice job on completing the challenge!

Your use of semantic HTML is good! Nice job there!

As far as understanding when to use px or %, the answer you're looking for may be that you don't need either as often as you may think you do. Generally, you should avoid setting heights (and widths) at all in your code. Whether you're using pixels or percentages, setting heights should seldom be necessary. Using the display property would help you a lot as it will keep you from needing to set deliberate heights for everything. You can use display to your advantage! display: flex for example, would cause your containers to grow as much as necessary to contain the content within them, then you can play around with paddings and margins to add more space in between, making it unnecessary for you to define heights or widths.

On a related but slightly different note, you should try using rem units as much as possible, not just for fonts, but for nearly everything (margins, padding, etc). Here's a video that might be helpful! Are you using the right CSS units

Hope that's helpful. Nice job and happy coding!

Marked as helpful

Contreras-Cristian• 20

@Letsdothis94

Posted over 1 year ago

@a-costas Thank you very much for your comment, I'll keep practicing with flex and rem to get some more experience. Happy coding! :D

Ecem Gokdogan• 9,380

@ecemgo

Posted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

If you want that this solution is responsive, I recommend some techniques without using media query for this solution. Also, I recommend avoiding repetition in your code and not using styles that don't work.

HTML

If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

CSS

After adding them to the HTML, you can add this font-family to the body
If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

body {
  /* font-size: 11px; */
  /* text-align: center; */
  background-color: hsl(212, 45%, 89%);
  /* font-family: "Lexend Mega", sans-serif; */
  font-family: "Outfit", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

When you use flexbox in the body, you don't need to use margin in the .outer-div to center the card
If you use max-width, the card will be responsive
You'd better update padding in this way

.outer-div {
  background: white;
  border-radius: 20px;
  /* width: 30%; */
  max-width: 300px;
  /* height: 80%; */
  /* margin: 100px auto; */
  /* padding: 0.5%; */
  padding: 15px;
  text-align: center;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

.outer-div img {
  /* height: 300px; */
  /* width: 94%; */
  width: 100%;
  border-radius: 18px;
  /* margin: 4%; */
}

You can update texts in this way:

.outer-div h1 {
  font-weight: 700;
  /* width: 90%; */
  /* padding: 2%; */
  /* font-size: 1.4rem; */
  font-size: 1rem;
  margin: 20px 0;
}

.outer-div p {
  /* font-size: 1.2rem; */
  /* padding: 4%; */
  font-size: 0.8rem;
  margin-bottom: 30px;
  color: lightgray;
  font-weight: 400;
}

footer {
  /* background-color: aliceblue; */
  padding: 20px;
  font-size: 1rem;
}

Finally, if you follow the steps above, the solution will be responsive.
You can remove media queries and this style below to clean the code because you don't need to use them

/* .big-card {
    background: hsl(219, 45%, 72%);
    height: 80%;
    width: 90%;
    margin: 10% auto;
    padding: 10px 20px;
    box-shadow: 10px 10px rgba(0, 0, 0, 0.4);
} */

Hope I am helpful. :)

Responsive design

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community