Responsive QR-Code-Component using HTML5 and CSS flexbox
Design comparison
Solution retrospective
the design,and i wana need support on css ,liitle bit.
What challenges did you encounter, and how did you overcome them?i did not face any challenges
What specific areas of your project would you like help with?css
Community feedback
- @MikDra1Posted 3 months ago
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 600px; }
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0@shikurassefaPosted 3 months ago@MikDra1 thankyou a lot.so you are saying that no need of to use a media query simply i can use width and max-width,righ?
0 - @TedJenklerPosted 3 months ago
Hi @shikurassefa,
Nice project! I noticed a couple of areas for improvement:
Semantic HTML: Consider adding a <main> tag to improve SEO and accessibility. You also don’t need more than one container—using display: flex with a column direction can simplify your layout and make your code cleaner by reducing unnecessary nesting. Always aim to avoid excess <div> elements when possible.
Headings Usage: It’s important to use heading tags for their semantic purpose, not just for styling. For example, <h1> is reserved for the page title and should only be used once, while <h2> would be the correct heading tag for this project.
Keep up the great work!
Best, Teodor
0@shikurassefaPosted 18 days agohi @TedJenkler first thankyou a lot for your suggestion
- add a <main>....if you look the code closely i was tried to add a main tag i think it is enough to add one main block,right? 2.as you said...'no need more than one container......' i got it very crucial bc simplicity is a key and minimizing a bugs 3 heading usage ...so shall i use h2 for this project...
0 - @RajanCPPosted 3 months ago
Need to spent some time reading on 'display flex' and how to make sure your main block is appropriately aligned in the centre.
0@shikurassefaPosted 3 months ago@RajanCP
the content of the child is aligned relative to the parent based on your preference.
0@RajanCPPosted 3 months ago@shikurassefa Yes but we are trying to get the content centred like the example given.
0@shikurassefaPosted 18 days agohi @RajanCP you mean the card is not centered like the example? actually from the recommendation of my friend @MikDra1,i used a grid concept....
0 - @akoaltynbekovaPosted 3 months ago
я рада что нашла такой оглайн ментор, было очень удобно и понятно
0@shikurassefaPosted 3 months ago@akoaltynbekova thankyou...do you have any suggestion about my project
0
Please log in to post a comment
Log in with GitHubJoin 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