For those of you enjoy a deceptively difficult challenge, we offer the HTML/CSS Chain challenge! The code is fully responsive; ie, the chain elements adjoin and flow as expected if zoomed to any size that fits the width of the browser window. These screenshots show a range of sizes and how they fit within different browser windows. In my original code, the link boxes (large circles) are 12em; the link connectors (the smaller circles) are 4em (numbers that are easy to manipulate). You do not have to use these numbers; eg, 6em and 2em would have worked just as well. The goal is to create a responsive layout that respects the stacking order of the chain elements and the directional flow of the numbers using the most efficient HTML and CSS.
This first screenshot shows how the chain adapts to a mobile device.
(These chain elements are the native 12em and 4em sizes mentioned earler.)
Hi, Paul and everyone. Sorry for the abstraction. Zooming text-only (changing the rendered font-size) in Firefox is an easy way to change the dimensions at which an object whose size in set using ems is rendered on the page. At 30% Zoom, the oversized chain elements are reduced to approximately 3em with 1em joints. My logic probably seems backwards since we normally think of āzoomingā characters larger. The act of āzoomingā isnāt essential to the design of the page at all. It simply demonstrates how the page behaves if the userās browser font size is different from the default font size in most browsers. Likewise, I would not have been able to demonstrate 12 links in one row had I not used some method of reducing the size of the font from āgargantuanā to āreasonableā.
As an exercise I used SVG to create the circles. The middle row with the reversed numbers was not straight forward. Smaller joined circles was ok. Source code at the screen bottom.
It should snake around if you open and close the browsers window or zoom the text-size from the browser controls. I could have done without classes in the html but that would make the css a little messy.
Probably needs a bit of tweaking but I was supposed to be working today:slight_smile:
I was wanting to check the browser width using SVG, when the width changes to decide how many circles to draw and also to change the link circle from three-o-clock to six-o-clock.
Looks like you have it already. I did make a start on one this morning using flex-box and order, but only got so far, then went to play outside for the afternoon while the weather is not terrible.
Now Iām not sure if I want to spend time finishing it now itās already been done.
Hmmm. In hindsight, I believe that Paul kept people interested in the challenge by asking them to submit their code to him via PM. The results were revealed at the end of the challenge. I didnāt think about that.
Thanks, @PaulOB, but I think Iāll just chalk this up to a learning experience. Plus, if anyone else decides to launch a challenge, they will know to avoid my mistakes
There hasnāt been a non-flex solution posted yet (Iām working on mine), and John might come up with a PHP generated version, so there are still opportunities for new creative solutions.
Sometimes though I think its helpful to see solutions as that gives others ideas on how to improve or to do it differently. No one has to look at the code anyway if they want to do it themselves;)
I suppose the actual benefit of not showing the code is that people canāt actually cheat or just copy the code but as its only for fun thatās not a real issue here
āJust for funā was my thought, exactly, but it is disappointing that @SamA74 seems to have dropped out now that a flex solution has been submitted.
I agree, you always learn something new from other peoplesā ideas or solutions. Even when you had done the same yourself, you see and think and learn some more.
Through all my life, in lack of the proper scholar knowledge, Iām used to reinvent the wheel in all places.
Of course I must look at all the code.
