Submitted over 1 year ago

Responsive design

Contreras-Cristian•20

@Letsdothis94

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

First take on this challenge, working with responsive design, still having some trouble understanding when to use 'px' or '%', hopefully I can get it down on the next challenge.

Community feedback

Andrea Y Costas•190
@a-costasPosted 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
1
Contreras-Cristian•20
@Letsdothis94Posted 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
0

Ecem Gokdogan•9,380

@ecemgoPosted 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. :)

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