I’ve just about finished my nightlife application and I’m noticing a few problems. The add/remove buttons for the last business flow outside of the container, and when the screen width is around tablet or smartphone size, the buttons stop working all together. I have no idea how that is happening. Here is my repo and a link to the app:
https://nightowls-app-1991.herokuapp.com/
What’s happening is your
margin is overlapping your buttons causing them to to be under that the p and unclickable, in my opinion you’re going to need to break these sections up into rows and columns with something bootstrap or flex box. You might also be able to play with the z-index but i think that’s only masking the problem.
Thanks for the reply! Is it possible to adjust the margins without breaking it up?
Hey, man! There’s a fairly common CSS hack that’s used to help in situations like these. You might know it - it’s called clearfix.
Normally, it looks like this:
clearfix { overflow: auto; zoom: 1; }
You can read about it here. If you apply it to your container, .list-container, that should do the trick.
UPDATE: You may need to apply it to each .in-container element as well to avoid the awkward overlap you’re getting randomly. Hope this helps!
2 Likes
Thanks for your suggestion! It didn’t work for me though, but I think I’ve figured out why I’m getting the strange overlap. Apparently I had only floated the img-container and not the other 2 containers. After floating them, I don’t see the overlap anymore.
1 Like