Design comparison
Solution retrospective
First time using media queries to create a mobile view and I found the results to be unsatisfying and not that close to the required design, but at some point I couldn't change the classes' width further to configure my webpage. Would really like to see suggestions on how to make my media query code better.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Let me explain, How you can easily center the component for better layout without usage of
absolute
positioning.
- We don't need to use
absolute
to center the component both horizontally & vertically. Because using `absolute' will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
.card { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%,-50%); }
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @dambusPosted over 1 year ago
Hi Felipe!
First of all, you've done a great job so far, don't let yourself get frustrated when doing something first time, it'll get better.
I see you're using
display: flex;
for your card element. Benefit of flex is that it makes content (qr code image, heading, text) responsive and force it to fit the surrounding element (card in this case). This means you don't have to specify your width and height of that card exclusively. Just set themax-width
of the card and let flex do it's job.In order to help flex do it's job for you, set elements inside your flexed card to be 100% of width (e.g. qr code image:
width:100%
) and set padding of the card to some value let's say 16px so you can get that fine white border line of 16px around all elements inside card.Then, finally if needed add media queries and change
max-width
of card andfont-size
,font-weight
of text accordingly.You don't need to make containers for every single element, flex is doing that for you too, so you can get rid of image container and text containers (these are all block level elements, so they tend to take up 100% of parent (surrounding element's) width.
Also as @BernardusPH said, practice to use landmarks / semantic html and include css reset in your style.css file (you can read more of css reset HERE
Hope this helps, have fun coding
Marked as helpful1 - @BernardusPHPosted over 1 year ago
Hello FELIPE ALVES LEÃO DE ARAÚJO
For this problem:
I see that you are setting a
max-width:300px
on the the card and then when the screen gets smaller you try to make it bigger which it cant, well usually it cant but with css I am suprised this didnt work. Anyway you cant go over 300px and you are trying to set it to 400px. I suggest usingclamp
here as you can set it in the card in the normal view and once your screen geta smaller you can add anotherclamp
. Please look it up futher as it is a great tool.This should help with your
media
problem, if not then just ask.I have a few suggestions for you that might help other than the
media
.First please dont use
divs
as landmarks if you are not using a framework/library like react. What I mean is the direct children of thebody
.Landmarks include:
- nav
- main
- footer
- etc
Lanmarks are used by screenreaders and landmarks make it easy for us to read the code so change the card div to a main.
Add this to your code and it would make life easier:
*{ ////makes it so padding and margin wont increase the container's size//// box-sizing:border-box; } body{ ///adds a perfect height to body(the height starts at the height of the screensize.//// min-height:100vh; ////puts the card in the middle//// display:flex; justify-content:center; align-items:center:center; }
Hope this helps.
Marked as helpful1
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