Submitted over 1 year ago

QR-code-component-Challenge

Holo Olagoke• 50

@Olarra18

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@WDWaleed

Posted about 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

Mikaias Silva• 160

@mikayas

Posted 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

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