Frontend Mentor | First solution - qrcode coding challenge solution

@xtirian

Posted about 1 year ago

Hi, @mav, hope you are doing well.

the % and vw

So, imagine this scenrio: html:

<body> 
   <section class="container">
        <div class="card"></div>
   </section>
<body>

css case 1:

.container {
width: 1100px
margin: 0 auto
}
.card{
width: 100%
}

Look that in this case ".card" style the "width=100%", the "card" size will be 1100px, respecting the size of his parent "section" (father element). If you open in a tablet screen with 768px, the size of the elements will continue 1100px (bigger than the screen and will create a scroll bar)

css case 2:

.container {
width: 1100px
margin: 0 auto
}
.card{
width: 100vw
}

Here the ".card" style the "width=100vw", then his size will depend on the size of the screen. if you open now in the same tablet screen 768px, the container will continue having the 1100px, but the card now have 768px independent of his father.

The logic is the same for vh. The problem of using vh and vw is when you have screens too big that the elements are dispersed; or the screen is too small that the elements become distorteds

margin and padding

So if you look in a objective and practical way, they are almost the same effect, the main difference is, the margin affect the outside of the element, the padding affect the inside of the element: html:

<h1>Hi</h1>
<p>I'm web developer</p>

css:

h1 {
 font-size: 44px
 line-height: 44px
 margin:10px
}
p {
 font-size: 16px
 line-height: 16px
 margin: 10px
}

In this example, the distance of the text "Hi" and "I'm..." are 10px. But, and if I change the CSS?

h1 {
 margin:10px
}
p {
 padding: 10px
}

Here, the distance of h1 and p, still 10 px, BUT the "Hi" will be 20px of distance from "I'm...". This is because the p element stil at the same place, but now the p has a distance of 10 px from his border until the text element inside it. And, in the last case:

h1 {
 padding:10px
}
p {
 padding: 10px
}

Here, the "Hi" will have the same 20px of distance from "I'm...", but the distance between the elements h1 and p is 0px. What it affects? if you add a border to the h1 and p for example, their borders will collide.

So that's all, my friend. Hope I could help you.

Marked as helpful

mav• 90

@xmavv

Posted about 1 year ago

That's an amazing respond! Thank You a lot!

Koli• 110

@KoliOyama

Posted about 1 year ago

In CSS, vh and vw are relative units representing percentages of the viewport's height and width. They enable responsive designs by adjusting sizes based on the user's viewport or screen size. However, extreme values should be avoided as they can cause oversized or too small elements on different devices. On the other hand, using px allows specifying an exact size for an element, providing more layout control but leading to non-responsive design. For a responsive container, you can use a max-width property with a value in rem or %, like this:

.container {
    display: flex;
    max-width: 20rem;
}

This will make the container adjust responsively until it reaches the specified width.

For margin, use it when you want to create space outside an element and use padding when you want to create space inside an element.

I'd suggest you go learn the CSS Box-model and Responsive web design. I recommend checking out Kevin Powell on Youtube.

mav• 90

@xmavv

Posted about 1 year ago

@KoliOyama Thanks for feedback!

Mustapha Al-Amin Oluwatimmilehin• 90

@timilehin223

Posted about 1 year ago

I have the same questions as you, however I think that using px is right in this challenge as the size of the card stays the same. I believe % is for a responsive design.

mav• 90

@xmavv

Posted about 1 year ago

Thanks for feedback!

First solution - qrcode

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community