@pikapikamart
Posted
Hey, good work on this one. Though I can't really give any advice about tailwind since I haven't used that one. But for you query, we can fix that.
I see that in your hover state, you are adding border-width: 2px, that's what makes the container's size resize. So instead what you want to do is that.
Add a declaration in your selector border: 2px solid transparent and when you hover on it, you just transition border-color. Because in your previous hover state, you are adding 2px which will create an extra space right. So to prevent that, you initially add that border-width, so when you hover, you are just adding a color to that border, hence not creating a space and will not make the container resize.
Also, it would be better if you not used height: 100vh in your body selector, because this will only allow the body tag to have a height of 100% of the viewport. Instead you should add min-height: 100vh. This will make sure that your layout will have a minimum height, based on the viewports height. Also add a padding to the top, as well as the bottom.
For the button alignment, since the text are being wrapped right, it pushes down the button as well, that is why it changes. I think you could get away with this using grid :>
Overall, you did good and the mobile state is fine as well^^
@aemann2
Posted
@pikamart thanks for the suggestion, that makes sense! I knew it had something to do with the width of the border but it hadn't occurred to me to try using transparent.
And good catch on the min-height--that's what I use when I do my CSS boilerplate, but since I just started using Tailwind I don't have any of that set up yet. I'll do a little work on this tomorrow and add in min-height there.
