Submitted over 1 year ago

QR-code-component-Challenge

Holo Olagoke•50

@Olarra18

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my second complete challenge. Though, the image of the challenge seen to be simple but I find difficult to reduce the entire card height in desktop view.

/*Desktop & Tablet view*/
@media screen and (min-width: 768px) {
.container {
max-width: 50%;
}
.img-box, .txt-box {
width: inherit;
height: inherit;
}
.img {
width: 100%;
height: 100%;
}
body {
margin-top: 2%;
}
    
}

Any suggestion on how to improve on it are highly welcome, Thanks.

Community feedback

Muhammad Waleed Ahmed•270
@WDWaleedPosted over 1 year ago
Hi,

This is a simple project. If you could just give it a max-width of 350px or maybe 400px it would work properly on mobile AND large devices. Don't specify width as 50%. It will work on mobile because the screen is small but on desktops and laptops, the card gets too big. Specifying an appropriate max-width would make life easier. Also, this way you wouldn't have to create media queries which will reduce the code and the project will still look the way it should.

I hope this helps.
Marked as helpful
1
Mikaias Silva•160
@mikayasPosted over 1 year ago
the css property "max-width" defines a maximum width for an element. Use in "img", max-width: 360px
Marked as helpful
1

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