Skip to content
Submitted 7 months ago

Responsive Meet Landing Page

Jarrod Ver Hey•150
@jvisme1991
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

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

  • yoe7501•450
    @yoe7501Posted 7 months ago

    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
    Jarrod Ver Hey•150
    @jvisme1991Posted 7 months ago

    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

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