Frontend Mentor | Kyureus's profile

@MarkitoOff

Submitted about 1 year ago

Hello! This is my first challenge and I would like to have some advice that will allow me to improve even more. I accept any comments.

Challenge n°1: QR-Code by Markito

Kyureus• 160

@Kyureus1

Posted about 1 year ago

your code is well done, but i find it too big to be only one object in the center of the page, you can ratherly lower its height and use flexbox to keep its content centered:

/*this will center all the content in your page, now you can give 
individual properties to them*/
*{
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*now you can modify the inner content of the box:*/
.attribution {
font-family: 'Outfit', sans-serif;
font-size: 11px;
display: flex;
background-color: hsl(0, 0%, 100%);
flex-direction: row;
}
* {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/*modify the size of the image*/
img {
width: 300px;
border-radius: 25px;
}
/*now you can make changes to the main div*/
.qr-code {
background-color: hsl(0, 0%, 100%);
padding: 2%;
border-radius: 25px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/*keep on mind all of the flex code is just to make sure 
everything remains centered when you resize or make 
changes on margin, padding, or even the size of the objects*/
}
/*now your qr box is placed in the center of your page and there's no scroll
bar needed, remember that if you want to make it even smaller, all you have
to do is reducing the margins of the <p> objects and adjusting their font
size, i still think it's too big for the case, but as you like it, it's 
fine too.*/

Marked as helpful

Kyureus

All comments

Challenge n°1: QR-Code by Markito

My 2nd Project on this platform of Result Sumarry!