@francoisbillet
Latest comments
- @MooseCowBear
You won't need a a margin. You can just do:
body { min-height: 100vh, display: grid, place-items: center } - @francoisbillet@MooseCowBear
The way I like to think about components like this is: Can the way I'm writing the component be reused in a different layout without changing anything?
If you center the component by specifying a margin on the component itself, you'd have to alter the component if you were to embed it in a different space. Not a huge deal, but it's maybe more work than you want. I would be nice to not have to do anything. Positioning by using grid or flexbox on the body will allow your future self (or someone else) to be lazy (in a good way!).
You're right that you will need a height on the body in order to use grid centering. You can set the height (or even better the min-height) to 100vh. Then, since it's the only thing in the body, its center will be whatever the center of the window will be.
Marked as helpful - @Meii-Lssa@MooseCowBear
Hi NedHalm,
You can add a hover effect even though it is a link. You'd just add a rule like "element:hover { whatever effect you want }". In this case, it looks like it's probably a filter to increase the brightness of the element.
If you want to add the same effect for someone who is using a keyboard to navigate, you can add a element:focus to the same rule.
- @mbongoelvis@MooseCowBear
It looks like what's happening is that you have made the mobile layout with two columns (display flex defaults to row so the mobile layout has two sections next to one another) and then you force the image to be above the text section by using absolute positioning. Then when you move to the desktop layout, the absolute positioning is still doing what you've told it to do but now the "top: -130px, right: 10%" is that upper right hand corner.
If you want to stick with Flexbox, what you want to do is ditch the absolute positioning and instead use "flex-direction: column" to position the image above the text in the mobile view. Then in the desktop view, switch it back to row.
- @LiamMarrie@MooseCowBear
It looks like you have given all of your bars a height of 20vh. What you probably want is to set a max-height on the bars so they won't distort the size of the component, and then use JS to calculate what the proportion of the max-height each item should be. You can use a scaling function to set the max value spent to the max height of the column, as discussed in this thread.
Alternatively, you could do something like each $10 spent corresponds to x many pixels (or em, or rem, or whatever your preferred unit is) and then calculate the heights by dividing by 10. That does have the potential to have very large columns on, say, a day the user bought a car.
If you want to get even fancier, you can use a log scale. That way even large deviations in spending do not result in huge differences in bar height.
Marked as helpful - @KAPIL9027@MooseCowBear
You can also use absolute positioning, top and left properties, and then a transform translate combination to center things, but it is a lot uglier than either flex or grid so I wouldn't recommend it.
