Design comparison
Solution retrospective
Things that I am proud of
-Learnt about media queries
-Learnt about center a div, vertically and horizontally in a screen
-position and display properties
What challenges did you encounter, and how did you overcome them?Challenges encountered
-positioning
I overcame it by researching online resources
What specific areas of your project would you like help with?I want to know if my positioning and spacing methods are appropriate or not? If not how can I improve? what are the best practices.
Community feedback
- @danielmrz-devPosted 5 months ago
Hello there!
Congrats on completing the challenge! ā
Your project looks great!
I have a suggestion about your code that might interest you:
š You can use the
<picture>
tag when you have different versions of the same image.Using the
<picture>
tag will help load the correct image to the user's device, saving bandwidth and improving performance.Example:
<picture> <source media="(min-width: 768px)" srcset="{desktop image path here}"> <img src="{mobile image path here}" alt="{alternative text here}"> </picture>
I hope this helps!
Other than that, excellent work!
1 - @ShoaibShujaPosted 5 months ago
First of all for spaces you can use
1rem
instead of like1px
which would apply more space at once because1rem
is equal to16px
and this way you can examine different spaces quickly. Also dont forget that you can use an extra one digit decimal withrem
like.5rem
which is basically8px
to match designs more effeciently.Also if you want to put your elements perfectly centered inside the body element instead of using
position
use flexbox in body element. This way you don't have to worry about positioning when using media queries and applying for smaller or bigger devices. This tip is optional but I believe is a better approach. To test this remove theposition
,top
,left
andtransform
from your.main-dev
and the media queries and copy following code to your CSS file:body { width: 100%; min-width: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
I wish you good luck my friend.
1
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