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

Huddle Landing Page using HTML + CSS

Alana Caporale• 150

@alanacapcreates


Design comparison


SolutionDesign

Solution retrospective


How can I left align my grid section on desktop? (the right half)

Community feedback

Adriano• 34,020

@AdrianoEscarabote

Posted

Hi Alana Caporale, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

The rest is great! I really liked the organization of the semantic tags!!

I hope it helps... 👍

0
Sean Gray• 690

@seangray-dev

Posted

Hey Alana!

Looks good! 👍 One thing you may not have noticed is your background image does not cover the entire screen at larger screen sizes. To fix this you can simply change the background size from contain to cover: background-size: cover;

To try and fix the spacing on your grid layout I did a couple things:

main {
max-width: 1200px;
margin: 0 auto;
}

By default grid containers will utilize the maximum space provided, so by applying a max-width we are saying this grid container cannot exceed the set value you applied. And then using margin: 0 auto to center the grid again. Thus decreasing the spacing you had between the two columns.

Hope this helps!

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