- 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.
Jhonatan
@JhonyDomingosAll comments
- @AishaakinSubmitted almost 2 years ago@JhonyDomingosPosted almost 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 -
- @Sudheer1918Submitted almost 2 years ago@JhonyDomingosPosted almost 2 years ago
Hey, Great Job buddy @Sudheer1918, Good Solution I like the way that you worked with the flexbox It's awesome.. I would recommend use
main
for the container landmark but your solution is great... if you wanna take a look at my solution, I appreciate your feed-back in anything that I can improve my solution!! congrats0 - @Effyz1228Submitted almost 2 years ago@JhonyDomingosPosted almost 2 years ago
Hey congratulations for your solution 🎉🎉 Here are a few tips that I've received from my solution that works very well
-
Replace the
<h2>
containing the main title with<h1>
note that this title is the main heading for this page and every page needs oneh1
to show which is the most important heading. Use the sequenceh1 h2 h3 h4 h5
to show the hierarchy of your titles in the level of importance, never jump a level. -
Use relative units as
rem
or em instead ofpx
to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible.REM
does not just apply to font size, but to all sizes as well. -
Use
<main>
instead of<div>
to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag. -
Put an
alt
value<img>
tag to improve the accessibility. -
There are a few things that you can put on your code as you wish!!
Great solution 👍
Marked as helpful2 -