HTML, CSS

Solution retrospective
I have made the changes mentioned below in comments. Feel free to critique further. Thanks.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
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
- @prabhjotkaur10
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.
- @RocTanweer
I would recommend you learn SCSS to make your whole code absolutely reusable 👍
Good luck 😃
- @madegilangaditya
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.
Join 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