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

typemaster landing page

P

@cmcrawford2

Desktop design screenshot for the Typemaster pre-launch landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


For some reason the margins don't look good on Chrome. They're fine on Firefox and Safari.

Community feedback

P

@cmcrawford2

Posted

Hi, Thanks for the advice! I am setting the box-sizing to border box and the margins to 0, but not the padding. I think the problem is that I've been using padding-inline: 2.5rem to set all my left-right margins. This is the same as padding 0 2.5rem or padding-left 2.5rem and padding-right 2.5rem. I don't think Chrome supports it. I could have set the padding on the body and have left it at that, then just changed it for tablet and desktop. Cris

0
Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello, Cris!

Your project looks great!

I have a suggestions about the margin issue that you're having:

  • You can use a CSS reset. This is a setting that includes some CSS rules with sensible declarations for reducing browsers inconsistencies.

I use a very simple one:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

There are other ways to do this, with many more rules. But for me, at least for now, this one has been enough.

I hope it 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