Basketball Scoreboard Element Alignment & Layout

[vapid topaz]

Hi! I am working on the basketball scoreboard project and I have everything working except for the layout.

Here is the figma file: https://www.figma.com/file/YC48MCx4frBFtYoz6rNJE6/Basketball-Scoreboard?node-id=0:1

Here is my Scrim: https://scrimba.com/scrim/codd345e093f149718b58652e

I have tried manually setting the margins for each element which partially worked with exception of titles (h3). I then tried restructuring the HTML to put h3 within an element and the manually set margins threw everything off so I set them all to auto. I thought using the top/left/etc properties would be it but that was not the case. Any help is much appreciated!

[inner viper]

@vapid topaz Hi Chris. This is where the dev tools come in handy. If you haven't used these tools yet, I detailed the basics of using them in this thread https://discord.com/channels/684009642984341525/1033703781046681630

Also remember that a lot of html elements (including <p> tags) have default margins applied to them that will be there unless you explicitly get rid of them.

[vapid topaz]

Hey @inner viper ! Thanks for the quick response. Is there a way to access the dev tools in the scrim preview browser

[inner viper]

Right click the grey bar at the top of the scrim screen and click "inspect"

[vapid topaz]

That's for the entire webpage including the code editor right?

[inner viper]

yes

[vapid topaz]

So the <p> element is within the score element which has a margin set so why does it not override them?

[inner viper]

Margin properties only affect the element, not any of its children

[vapid topaz]

I guess the margin being grayed out probably means something?

Any other properties that act in a similar way to margin?

[inner viper]

padding acts the same way

[vapid topaz]

Thank you!!

when you solve one it leads to another! 🥲

I am very new to front-end coding so I am sure it's something very basic

[inner viper]

Only way to get better is to keep practicing

[vapid topaz]

Hey @opal lily ! It may be worth adding to the help page that html elements have default properties that need to be explicitly replaced as I completely restructured the html before trying this. Also any chance you could help out here as I am stuck and have spent a few hours trying to figure out this alignment issue. https://scrimba.com/scrim/codd345e093f149718b58652e

[inner viper]

@vapid topaz I fear you've made the classic beginner error of adding too many stylings to things trying to fix problems that shouldn't be there in the first place. I'm going to detail some stuff I've removed to clean up the look of things:

.score-btn-box {
  margin: 26px 100px 69px 82px;
}
.team {
  margin: 68px 106px 21px 85px;
  width: 149px;
  height: 36px;
}
.container {
  width: 410px;
  height: 248px;
}

These are all things I have removed, and I've added nothing, and I'm left with this:

fixed heights and widths are tricky things to work with and I tend to avoid them as much as possible.

[vapid topaz]

I had a feeling this was the case - the translation from figma to html/CSS seemed more difficult than it needed to be. The fixed heights and width came directly from figma so perhaps I am missing something with how to properly port the designs over

Thank you for getting me closer!! @inner viper

I may jump to the figma to code course tmw to figure out the space issues