Skip to content
Submitted about 2 years ago

Responsive Landing Page using CSS Grid

Leticia Fernandes•50
@lichtle
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I find it very difficult to use CSS Grid, specially while positioning elements inside rows and columns. Not sure if it's correct to use margins to position these elements and also I am confused about when I should use px, %, vh and vw to size elements. Any tips will be very welcome! Thanks.

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey @lichtle, great job on this project!

    Regarding your questions:

    Heres a link that I use for anything CSS grid related, it shows everything there is to know about it: https://css-tricks.com/snippets/css/complete-guide-grid/

    You definitely use margins to position your content, but you can also use align-items, grid-area, justify-self, etc... the link above will provide more detail.

    For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values. PX are absolute while rem/em are responsive.

    If using ****, you can download the extension px to rem and it do the conversion for you. Or you use an online converter or just divide the value by 16.

    Some suggestions to improve you code:

    • For you background, add the following to your <body> element to have it take up the entire page and have it centered:
    body {
  min-height: 100vh;
  background-position: center;
}

    • For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

    • When using buttons/links alongside the “hover” effect, you’ll run into the problem where the hover effect gets “stuck”. To prevent this, you’ll want to add the @media (hover: hover) to your CSS code and include within the query all the classes that are using the hover effect. Since not all devices support hover effects this query will then check to see if it is or not.

    Happy Coding!

    Marked as helpful
    1
    Leticia Fernandes•50
    @lichtlePosted about 2 years ago

    @vcarames Thank you so much for your help! I already applied some changes to my code using your tips. For some reason the background using min-height: 100vh and background-position: center didn't work... I also had to use background-size: cover.

    0
    バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    @lichtle Glad I could help! Background looks way better!

    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