Submitted over 1 year ago

first web qr page

salemsaada•10

@salemsaada

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Ecem Gokdogan•9,380

@ecemgoPosted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

HTML

You'd better update the html structure in this way:

<body>
  <main>
    <img src="image-qr-code.png" alt="QR image"/>
    <h1> Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </main>
  <footer>
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Salem Saada</a>.</font>
  </footer>
</body>

CSS

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{
   background-color:hsl(212, 45%, 89%);
   font-family: calibri ;
   display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

I recommend you use main or a class name you will give instead of using div. Otherwise, it might cause some problems in the style.
You'd better update padding to give a gap between the content and the border of the card

main {  
  max-width: 300px; 
  margin: 0 auto;
  text-align: center;  
  background-color: white; 
  border-radius: 5%;
  padding: 15px; 
  /* padding: 1%; */
  /* margin-top: 30px; */
}

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

img{
   width: 100%;
   border-radius: 5%;
}

You'd better add these styles for texts

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0;
}

p {
  color: gray;
  margin-bottom: 2rem;
}

Finally, if you follow the steps above, the solution will be responsive.

Hope I am helpful. :)

Marked as helpful

salemsaada•10

@salemsaadaPosted over 1 year ago

@ecemgo Thanks a lot

Abdul Khaliq 🚀•72,560
@0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

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

Now remove these styles, after removing you can able to see the changes

div { margin: 0 auto; margin-top: 30px; }

Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
salemsaada•10
@salemsaadaPosted over 1 year ago
@0xAbdulKhalid OMG, that is extremely helpful bcz centering using these is hard.im thankful to you
0
Mati•30
@sdmatiasPosted over 1 year ago
@salemsaada Hi! To achieve vertical and horizontal centering try the following CSS code. body { display: flex; min-height: 100vh; align-items: center; justify-content: center; }

I also advise you to write your CSS in an external style sheet and link it in the head of your HTML. There are several errors in your HTML. Try to investigate more about semantics and good practices. I recommend the W3schools website.

Mati
1
salemsaada•10
@salemsaadaPosted over 1 year ago
@sdmatias Thanks a lot for your feedback. This is my first challenge, and ill be taking your advice thanks.
1
salemsaada•10
@salemsaadaPosted over 1 year ago
these mini details doesn't matter
0

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