Design comparison
Solution retrospective
I have made the changes mentioned below in comments. Feel free to critique further. Thanks.
Community feedback
- @grace-snowPosted over 3 years ago
Hi
I'm afraid this looks very broken for me I think because of how you're using viewport units on height. You'll only ever want to use a min- height in viewport units when necessary, which then allows content to grow as needed.
For this component though, I don't think even min-heights are necessary anywhere except the outer wrapper, maybe the image container if you are doing it with a background image and not placing it in the html...
Before any of that though, you need to address the html first
- use a heading
- remove all the line breaks
- swap mark for span
- put the words like "companies" in lowercase in the html so they can be read out by screenreaders. You can change their case to uppercase visually using the text-transform css property.
Good luck
1@foolhardy21Posted over 3 years ago@grace-snow thanks for helping. i'm making the changes in html. can you also help me in a case where if i reduce my viewport height, the list elements are overflowing its parent div from bottom. how do stop this? thanks.
0 - @prabhjotkaur10Posted over 3 years ago
Hi, Nice attempt. The image on right side, cuts, since its element does not have a background-size. I would suggest you to replace this piece of code in css. Also you can fix it in mobile view.
.card-image { width: 600px; height: 100%; background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-desktop.jpg); background-size: cover; background-repeat: no-repeat; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-position: center top; } @media (max-width: 500px).card-image { width: 100%; background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-mobile.jpg); background-size: cover; background-repeat: no-repeat; height: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } This will fix the skewed image issue in mobile view.
1 - @RocTanweerPosted over 3 years ago
I would recommend you learn SCSS to make your whole code absolutely reusable 👍
Good luck 😃
1 - @madegilangadityaPosted over 3 years ago
Hi Vinay, Congratulations for finish this project, there an issue in your background image. you need
background-repeat: no-repeat;
so your image will not repeated.1@foolhardy21Posted over 3 years ago@madegilangaditya thanks. but if you visit the site url, the image doesnt repeat. any idea why this issue is visible only in this particular case(frontend mentor design comaprison).
0@madegilangadityaPosted over 3 years ago@foolhardy21 I think because you use
height:55%;
on your card class so the height will shrink according to parent element.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