Design comparison
Solution retrospective
How do i make my project responsive? Responsive Design Is the most difficult for me.
Community feedback
- @johnnygerardPosted 10 months ago
Hello Oyesina,
If you read the challenge page, you will see that it has only one layout. To build a responsive layout, you need to start another challenge.
I can already tell you that
@media
CSS rule is the main way to make a website responsive.Good luck with your projects!
Marked as helpful1@oyesina-paulPosted 10 months agoHey @johnnygerard
Thanks a lot for taking the time to answer my question.
Yes. I am embarking on another challenge now..
And I will be learning as much as I can on media queries.
Thanks a lot Johnny 🤝
1 - @bccpadgePosted 10 months ago
Hello @oyesina-paul. Welcome to Frontend Mentor Community!!!🎉
Here are few tips you might be interested in to improve your solution.
HTML 📃:
- Wrap all your content using a main tag
- Attribution should be wrapped in a footer tag
- The image should have alt text:
<img src="images/image-qr-code.png" alt="qr code to frontendmentor.io">
for screen readers
HEADING TAGS
<h1>
is the most important tag on a website and<h6>
is least important on the page- The title on this page is
<h1>Improve your front-end skills by building projects</h1>
CSS 🎨:
- Font size shouldn't be in pixels because pixels don't scale when users want to change their font size in their preferred browser.
- Best practice to remove default styles using the CSS Reset below
To center your component in the middle of the page you can use Flexbox or CSS Grid
Flexbox
body{ display:flex; justify-center; align-items: center; min-height:100vh; }
CSS Grid
body{ display: grid; place-content: center; min-height:100vh; }
- You can add the
font-family
on thebody
and everything within thebody
will inherit thefont-family
- On your
.container
addmax-width
so your component will be responsive without media queries For the image, you can putmax-width:100%;
anddisplay:block;
for default styling - Use these styles and your attribution better position on your website
.attribution { font-size: 0.688rem; text-align: center; /* position: relative;*/ /* top: 10px;*/ position: fixed; inset: auto auto 1em 1em;
Inset property is a shorthand for
top
,right
,bottom
,left
Here is my solution to this challenge - Qr code component
I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful0@oyesina-paulPosted 10 months agoHello @bccpadge
Thanks apt for taking your time to explain this...
I now understand a great deal on it...
I appreciate you
0 - @flaviare1sPosted 10 months ago
Hello Oyesina! I recommend that you study the concepts of Media Query and Mobile First.
To make responsive websites it is interesting to learn Flexbox and Grid.
Congratulations on your 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