Responsive landing page using CSS Grid
Design comparison
Solution retrospective
What should I do concerning the responsiveness of the project? I having quite a difficulty when it comes to the grid and media queries. What do you suggest?
Community feedback
- @elaineleungPosted over 2 years ago
Hi Oyasi Kelly, welcome to Frontend Mentor, and congrats on submitting your first challenge! It looks like you put in a lot of time and thought into making it, and everything looks like it's working aside from the lack of responsiveness. Having said that, if you're learning how to code, I do encourage you to try recreating the original design first because the design brief does say to make your work looking as close to the design as possible, and that is a big part of the challenge. This will help you develop skills that can be used when facing real-life situations where you're asked to produce work for a client.
About the issues in the report: It looks like there are a number of issues here (over 90 HTML validation issues!!). I believe it's because you submitted your CodePen as a live site. I believe you can deploy your CodePen if you have it as a project, which is only available for pro members as far as I know. If you can't deploy using CodePen, can you try either GitHub pages or Vercel? Otherwise, the accessibility and HTML issues are likely to remain in high numbers.
Also, I'm looking at your code on GitHub and it looks like all your CSS is placed after your
<body>tag. This will cause your styling to not show up, so be sure to put all the<head>tags instead, or you can also paste the CSS onto astyle.cssfile and then link to it within your<head>tags. Either way, the code needs some cleaning up before it can be workable.To recap, before working on anything else, be sure to deploy your site on one of the trusted hosted platforms. Have a look at Matt's article here for details: https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe
Good luck, and happy coding!
Marked as helpful0@OyasikellyPosted over 2 years ago@elaineleung Thank you very much, i will work on it again
1 - @TamunopreyePosted over 2 years ago
Well you should try reading the guide that comes with the project when you download it. It gives you the colors and images to use in the project, remember the goal is to make it look like the main project itself. It's a way to help you better your designing.
Now concerning the responsiveness of your project if you find it difficult to do maybe you should start with mobilefirst responsive design and what do i mean?? i mean you should first design it to look straight in this manner you can use either grid or flexbox like this. first set your body to a min-height: 100vh; card { max-width: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; } or you can use the grid layout card { display: grid; grid-template-columns: 1fr; } then for desktop first design you can just use the below code i hope it helps tho... i'm also learning i might be wrong too....
card { max-width: 700px //or any amount you want display: grid; gird-template-columns: repeat(2, 1fr) //meaning make it a 2 column layout or grid-template-columns: repeat(2, minmax("auto-fill", 1fr) //which will make it also responsive } or using flexbox display: flex; //by default it will turn to a column layout of howmany amount of containers you have in the card card { display: flex; flex-direction: row; flex-wrap: wrap //this will wrap your element if the width isnt 100% }
Marked as helpful0 - @OyasikellyPosted over 2 years ago
How can I repost my solution to the first challenge (product preview component), because I am not really satisfied with the first one?
0@elaineleungPosted over 2 years ago@Oyasikelly What you need to do is, go to the "Challenge Hub" page for this challenge, and you will see the information about this challenge, such as how many people started and completed it, and how many times you attempted it. On the top right corner on this page, you'll see "Update Solution". You can click into it if you need to change the links or if you want to rewrite the description. The other way to update if you want to generate a new report is to go to the report page, and click on the red "Generate new report" on the top right corner.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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