Design comparison
Solution retrospective
- I don't know how to use the mobile and desktop viewport.
- I can't make the sentences size fit right like the original template.
Community feedback
- @JhonyDomingosPosted about 2 years ago
Hey congratulations for your solution.. Hey I have some tips if you wanna test for your solution
-
Adding to the body
min-height 100vh
the elements should occupy the web browser viewport height. -
.container
you addtext-aling:center;
set thewidth
with a value inrem
not in %, I think 18.5rem will awsome, you can declaremargin
30px to the top and auto ex:.margin:30px(top) auto;
-
h1
do not need awidth
and you can declare thepadding
like thispadding:(top)20px (right)30px (left)30px 0(bottom);
and check this padding I think it's a little too much, I think thepadding 15px
its enough -
p
tag I think you can remove the paddings because already and put in thecontainer
it will be aplied toh1
andp
tags -
on
.img
do not need theheight:100%
and you can addmax-width:100%
and set thewidth:100%
and check thepaddings
maybe you won't need them -
You can change all the sizes
px
torem
to resize better when the screen gets smaller
I think that's all!!! there are a few tips that can improve on your solution!! I'm here to help anything, I'm gald in help ya !!! if it was useful for ya I'll be glad
Marked as helpful1@AishaakinPosted about 2 years ago@JhonyDomingos Oh Thank you i will try your help tip. Thanks again.
0 -
- @mahmmoud5Posted about 2 years ago
if you want to use the mobile and desktop viewport you can use " @media not|only mediatype and (expressions) { CSS-Code; } " or you can search on google about responsive websites and then you will find the answer for you'r question.
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