Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Meet Landing Page

@jvisme1991

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am most proud of using grid over flex on this design.

What challenges did you encounter, and how did you overcome them?

My main challenge was choosing to go mobile or desktop first on this design. I ultimately started with the tablet view first as I felt that it had the least amount of changes to make at different screen sizes.

What specific areas of your project would you like help with?

I still would like to gain a better understanding of grid.

Community feedback

P
yoe7501 240

@yoe7501

Posted

Hey! I like the result and congratulations on finishing it. Just a few things just by looking at the website on desktop view the image doesn't reach the edges not sure if the size is set so the images are restricted in a way or maybe you can try to use

grid-template-column: repeat(3,1fr);

and then play with the individual margin / padding/ width because they can all affect how the grid tries to even the differnt cells out. Using the dev tools will also help see the width and height of each cell and where exactly that height / width is coming from which can be from smaller media quieries and such (It can get pretty hectic pretty quickly) Another thing id like to mention is on tablet view the footer doesn't take up the whole space which might be fixed with a

max-width: 1024px;
width: 100%;

Again this might work unless you've added margin or padding or set the size of it previously in the css that might interfere with the newly written code. Again Congrats :).

Marked as helpful

0

@jvisme1991

Posted

I appreciate this so much! I will have to double check my work and see what I did. Thank you for the positive feedback! @yoe7501

0

Please log in to post a comment

Log in with GitHub
Discord logo

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