Skip to content
Submitted over 1 year ago

First solution - qrcode

mav•90
@xmavv
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey, as it's my first solution, I have 2 questions that sometimes blow my mind. When to use vw and vh, when %, and when px. For this site I did px, because I don''t want my card to change size while, width is changing. It is correct? Second question is when to use margin and when padding? Do they have their own rules?

Community feedback

  • Matheus Fernandes•340
    @xtirianPosted over 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
    1
    mav•90
    @xmavvPosted over 1 year ago

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

    0
  • Koli•110
    @KoliOyamaPosted over 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.

    2
    mav•90
    @xmavvPosted over 1 year ago

    @KoliOyama Thanks for feedback!

    1
  • Mustapha Al-Amin Oluwatimmilehin•90
    @timilehin223Posted over 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.

    1
    mav•90
    @xmavvPosted over 1 year ago

    Thanks for feedback!

    0

Please log in to post a comment

Log in with GitHub

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