The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS New to CSS; Code works but still needs someone to check please Reply To: New to CSS; Code works but still needs someone to check please


I do not understand the code completely

Which part don’t you understand? The mechanism that switches the images is the checkbox hack, so here’s a place to start

The code seems to work without any problem

Yes, on desktop. On mobile… maybe not so much. I’ve only tested on iPhone 6 Plus but I wasn’t able to select the thumbs at all the first time I loaded the page. The second time, the thumbs selected/changed but crashed Safari immediately… and on every subsequent selection, a page load was triggered thereafter. That may have something to do with being sat inside a CodePen – sometimes the code appears to be more stable on a standalone page. But it would depend on what else is on the page in the outside world (a web page very rarely houses one standalone ‘feature’) – any other scripts and other resource hogging CSS, etc., can collectively crash the browser on lower-powered devices. The number of images (i.e. HTTP requests) might also be to blame – 80 thumbs? Eeek! Too many. Maybe limit them to a much more manageable 8-12.

I would like someone to check if there is any error and possibly make it better (with correct comments & modify/delete any useless code)

Sure, I charge £30 per hour, LOL. Realistically, the good folk here (the ones who voluntarily contribute their experience regularly on forums, also having full time jobs, friends, family life, and personal web projects on the go) will be happy to give you tips and pointers, maybe a snippet of code if the topic personally interests them, but at the end of the day, we expect you to do the research, learning and legwork yourself. To get the best guidance, you’ll need to ask specific questions, for example:

Q: “What triggers the image changes?”
A: “The checkbox hack – check out this link …”

Q: “What makes the images zoom?”
A: “Transform:scale – more info here … ”

A good start is that you’re using the lint tool.

Since I am new to CSS, I do not know how to fix these 3 warnings

What are the warnings? (it takes too long for me to work that out on your behalf when you could provide the info upfront in the forum) Have you Googled them? The lint tool will give you directions to fix the errors/warnings, and a bit more research on what those directions say will guide you to fixing them (or at least into interpreting them in ways that will lead to further research that helps you join the dots a little more easily, or decide if you can safely pass). Example;

“The box-sizing property isn’t supported in IE6” … That’s OK – I can ignore – I’m not supporting old browsers.