Skip to content
OverviewSolutions
6
Comments
5
Koli
@KoliOyama

All comments

  • Koli•110
    @KoliOyamaPosted over 1 year ago
    CSS
button{
     /*your button styles*/
        }
button:hover{
     background-color:  /*put the lighter shade*/;
            }

    :hover is a pseudo-class. It's used to apply styles to an element when you hover over it.

    I'd suggest you learn more about this on Youtube. Check out channels like Kevin Powell, Net ninja and so on.

    Marked as helpful
    0
  • mav•90
    @xmavvSubmitted over 1 year ago

    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?

    First solution - qrcode

    3
    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
  • indulakshmikr•40
    @indulakshmikrSubmitted over 1 year ago

    Hi, Frontend Mentor Community!

    I'm here with my first solution for a challenge - QR Code Component. I would like to seek your attention to review the solution provided by and request you to drop your valuable insights!

    Thanks a lot!

    QR Code Component using Flexbox

    1
    Koli•110
    @KoliOyamaPosted over 1 year ago

    You did good. Although I feel the positioning of the container could have been better.

    body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
        }

    The code above will perfectly center your container, preventing it from having the vertical scroll bar. You won't need to add a margin top to your container to push it vertically downwards.

    Marked as helpful
    0
  • Djengis05•30
    @DarkGamerXDOFFSubmitted over 1 year ago

    I've had most problems with centring the card. I ended up using flexbox for this but was this the best solution? Also, what would be a more efficient way to manage the card size?

    QR Code Component using basic HTML and CSS

    2
    Koli•110
    @KoliOyamaPosted over 1 year ago

    Yes, you were right to use flexbox. Just to clarify;

    body {
   display: flex;
   justify-content: center; 
   align-items: center;
   min-height: 100vh;
          }

    Using justify-content: center, the container will be set at the horizontal center. While align-items: center will set it at the vertical center.

    With grid:

    body {
       display: grid;
       Place-items: center;
       min-height: 100vh;
             }

    As for managing the widths, try making use of the max-width property for the containers. This will restrict it from stretching with your browser window. I hope this helps ;⁠)

    0
  • Koli•110
    @KoliOyamaPosted over 1 year ago

    Hey Mark. I ran into an issue when loading your site. The summary header only shows up once I highlight that area. Try styling the span in your summary section to make it appear. Also, I like what you did with the button 👌

    0