Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code solution for desktop and mobile using HTML and CSS At-Rule

@FaithNA

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had difficulties trying to align the text in my div. In the desktop preview images, the distance between the text and the div container is not so much. When I try implementing it to have the same distance, the text changes from 3 lines to 2 lines. I thought the problem was the font size but also I was thinking, a standard font size was already given in the style guide.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @FaithNA!

Your project looks great!

I noticed that your card is not centered. Here's a very efficient way to place the card in the middle of the page:

  • Apply this to the body (in order to work properly, don't use position or margins):
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

@FaithNA

Posted

@danielmrz-dev Thank you for leaving a review. It definitely helps. This is the CSS code I have for the div element:

div{

margin: auto;
margin-top: 50px;
margin-bottom: 50px;
background: hsl(0, 0%, 100%);
max-width: 350px;
height: 500px;
text-align: center;
border-radius: 20px;

}

Do I need to remove the margins and max-width here?

0
Daniel 🛸 44,230

@danielmrz-dev

Posted

@FaithNA

You can remove the margins, but you can leave the max-width

Marked as helpful

0

@FaithNA

Posted

@danielmrz-dev Well Received.

1
P

@LucasW92

Posted

Hello!

I've also had problems aligning the text.

As @timodn said, remember to apply the correct font-size and font-weight.

The problem seems to be in your margins, you can control the margin between the bold text and the other with margin-top, margin-bottom, or just margin: top right bottom left (clockwise).

Also, you can set width and height for the h1, p.. that way you can create boxes that you can control.

In your browser, hit F12 to open up the dev tools, the top left button should be a selector tool, use the selector tool to see the margins that are currently being applied.

https://developer.chrome.com/docs/devtools/dom

This should help you to see the margins.

Marked as helpful

0

@FaithNA

Posted

@LucasW92 I will try to adjust my margin and set the width and height for the text as you recommend. Thank you! So that will mean that I will have to create a sub-div for them. Thank you for your review.

0
timodn 240

@TimmyOGH

Posted

You should increase the bold text's font size. The standard ones are for normal text sizes only I guess.

Marked as helpful

0

@FaithNA

Posted

@timodn Ohh okay. Thank you.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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