Design comparison
SolutionDesign
Solution retrospective
Striving to learn every detail. I appreciate the comments!
Community feedback
- @ChamuMutezvaPosted almost 3 years ago
Greetings Jehan
So far so good. Somethings need some attention includes the following
- there is some mobile devices which have a screen width of less than 320px, using
@media (min-width: 320px)
will prevent such devices from properly accessing the site. Check using dev tools below 320px - the height of the image is 480px, setting it to a fixed height of 280px is causing it not to scale properly on medium devices. Check the image anywhere between 900px and 1280px
- if you want the text to be centered always , remove the
margin-left: 12.5%
andmargin-top: 2rem
. Replace with amargin: 2rem auto
.div-txt h1 { margin-left: 12.5%; // remove this margin-top: 2rem; // remove this margin: 2rem auto; // replace with this width: 75%; color: hsl(0, 0%, 100%); font-size: 1.6rem; } ``` - set the body to ` min-height: 100vh;` instead of the ` height: 100%;`
0@Jank1510Posted almost 3 years ago@ChamuMutezva oh thanks for the information !
0 - there is some mobile devices which have a screen width of less than 320px, using
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