Latest solutions
Latest comments
- @acabrie@lack21
Hi there, that's a good work right there, but I have some recommendations!
-
Instead of
width: 310px
in.container
addwidth: min(500px, 90vw)
, it will adjust width to 500px and if screen's width will be less than 500px.container
will adjust to it! -
Replace
margin: auto
in.container
tomargin: 1.5rem auto
to add some additional space to the top and bottom!
Good Luck! 👍
Marked as helpful -
- @Bibiwei-Pere@lack21
Great work 👍, but I have a suggestion for you!
- Remove
background-size: 100% 100%
from class.hero
and add these styles instead
background-size: cover; background-position: center;
like this background image will fit well on all devices!
- Remove
- @YoungZV@lack21
Good job 👍, but I have a suggestion!
- Add
background-size: contain
to thebody
, so background image would fit well on larger devices!
Marked as helpful - Add
- @BKvip@lack21
Good job 👍, but I have a suggestion!
- Instead of
padding: 1rem 1.2rem
in the class.point
use these styles
width: 3rem; height: 3rem;
like this circles will be round!
Marked as helpful - Instead of
- @Jacqui72@lack21
Excellent work 👍, but I have a suggestion!
- Remove these styles from
.container
margin-top: 100px; height: auto;
and add
min-height: 100vh
instead, like this layout will be centered! - Remove these styles from
- @LevyMatias@lack21
Great work 👍, but I have some recommendations!
- Replace
height: 100vh
tomin-height: 100vh
in thebody
, the difference is that, when you setheight: 100vh
to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to setmin-height: 100vh
, like this in case content is overflowing container will adjust to it! - Remove
width: 100%
from thebody
,body
is a block level element which by default takes full space available, sowidth: 100%
does nothing here!
Marked as helpful - Replace