I’m currently working on my third responsive web design project, the product landing page. It is taking me considerably more time than the first two ones, but I’m also learning a lot.
I want to add a simple image gallery and, after some research, I found this example (at 3/4 of the page), which works for me. I reworked it a bit and made a pen from it to make sure I understand the logic behind it.
I have an issue, though: I want the radio-buttons to stay on top of the images, so I gave them a z-index of 1, but that is not working as expected. The only button which seems affected by the property is the selected one; the others are covered by the images. You can see the problem on my product landing page if you try to resize it, and probably if you have a smaller screen than mine. The image gallery is at the bottom.
Could anyone point me in the right direction?
The relevant code is at lines 31-63 (HTML) and lines 168-213 (CSS).
Hi Tom, thank you!
That was easy, I’m a little embarrassed right now . I should have known better.
well, they are below the images, but as their positioning depends on the padding of the #gallery-container div, and I haven’t yet found a way to ‘lock’ them below the responsive image(s), I was going to use the z-index as a precaution. I’m still new to web development, and it’s more than likely that I don’t fully understand this image gallery method.
Anyway, thank you again, you’ve been very helpful
To clarify my comment about showing the radio buttons below the images: what I was thinking of was actually something in the lines of separating the images and the radio buttons in your code. You now have:
Just thinking out loud here without having done some testing. But that way, you could always have the controls displayed beneath the images. You could likely also do something with media queries to change the behaviour based on the width of the viewport.
Could you explain why? I found this example lurking on MDN web docs so I assumed it was a viable solution, if slightly unorthodox.
Actually, I tried to use it on the first version of my product landing page, but I think it could have a bug? Or, more probably, as I don’t fully understand it, I couldn’t get it to behave as I wanted.
Specifically, when I included it on my page, clicking any of the buttons caused the page to jump at a specific height (I think also the example pen of Chris Coyer has the same issue: you can see it the first time you click any of the buttons - then the bottom of the pen is “moved up”).
Hope is clear enough, I’m not an English mother-tongue!
So, as I couldn’t understand what the problem was, I chose to use the “Checkbox Hack”. I see now that Chris Coyer has a page on this trick too.
Using radio buttons for something else than a form does not feel quite right to me. But I haven’t done the research. And MDN is indeed a very respectable source. So may just be a (wrong) feeling
Nice find! Although it looks like he has his doubts too: