@tlauffs
@piushbhandari
Submitted
when using css grid, the content starts to overflow on screens less than 375px. one solution i suppose is overflow:hidden but the content starts to disappear. any tips here?
i solved it by using flex and flex-direction: column and it starts scaling nicely on smaller screens, but i was wondering if there was a css grid approach to this
@tlauffs
Posted
Hi, great solution. Yes you can use grid for this. For example you can use 'grid-template-columns: repeat(2, 1fr);' to create 2 columns of equal width that will shrink as the screen shrinks. A great tutorial that helped me understand how to use grid is here: https://www.youtube.com/watch?v=rg7Fvvl3taU
Marked as helpful
@nikoProg
Submitted
Any advice about the layout in general?
The button starts glowing upon hovering, but if you click it, the glow gets stuck, no matter where you move the mouse, until you click on something else. How can I make the button glow and stop glowing when I stop hovering? My solution is a bit of a hack, using ::after pseudoelement, so I am not sure how to fix it.
This was also my intro to typescript. I installed it, because I like that strongly-typed languages make it easier to fix some mistakes, so I hoped this could help. I didn't have much use of it yet, since the only script needed here is to fetch advice from the API.
@tlauffs
Posted
Try using the :hover Selector instead of an ::after pseudoelement to create the glow effect. It will only trigger on hover and you should only need a box-shadow to create the effect. You should also consider adding a :focus state for keyboard navigation as :hover states aren't shown.
