I’m a beginner coder and I’m trying to make buttons that slide to different images when you press them. I want the buttons to be on the left and right side within the images, but when I resize the window they go outside of the box. I tried placing them in the same container but it seemed to mess everything up so I just changed it back. My code is a bit messy so I apologize in advance, and here is a link for it on Codepen: https://codepen.io/strxwberryskies/pen/VwGNEpo
I’m still trying to learn the basics but it looks like items are being placed based on a grid but your grid doesn’t have a fixed size. This means that when you are resizing the page it makes the grid boxes expand or shrink.
Currently you have them contained in the body and that has a variable size based simply on the size of the window. You can constrain your body element but that is not best practice as far as I’m aware.
One thing that might help is setting a max size that you want them to be displayed at and putting the buttons and images inside a container that is constrained to that size.
1 Like
Thank you! I’ll try that and see how it goes.