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

Meet landing page

P
yele.m 330

@YelemyahM

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 challenges did you encounter, and how did you overcome them?

I really struggle with image as background, taking 100% of the screen, while having a padding.

Community feedback

P

@Rohloffmeister

Posted

Hi, Your Website looks good so far. To start with your problem you could try putting the footer outside of your <main> (this also helps with accessibility. If you want to know more google "HTML Semantic Elements"). I also saw that the 4 images can get pretty big. I personally would use the grid property.

/* Dekstop and Tablet*/
.img-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.img-grid img{
  width: 15wv;
}

/* Tablet  */

.img-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.img-grid img{
  width: 22wv;
}

/* Mobile */
  .img-grid {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  }

.img-grid img{
  width:40wv;
}

Thats how i did it. I hope this helped you a bit.

Marked as helpful

0

P
yele.m 330

@YelemyahM

Posted

@Rohloffmeister Thanks for the feedback. Great idea to set footer outside.

1

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