This was a rough one

One a good note I’ve completed making the home page responsive (for now). After making the hero section more responsive last time I then proceeded with making the courses and puzzles page more responsive.

I mainly used the clamp css funciton to make the course and puzzles section responsive. The courses section remained the same as I am quite happy wiht how it turn out but I didn’t like how the puzzles section was looking after testing the website out in my phone. It looked to small for a section so below 768px instead of the text and image being horizontally aligned it’s now vertically aligned. The clamp part was similar to the courses section.

Finally after completing those two I started working on the visualization section. I was the hardest section to make responsive due to the absolute positioning of the moves. Firstly I only focused on bigger screens as I had no idea how it would look on smaller devices. The moves were positioned before by mapping an array with the move notation and the css of top and right/left with percent values. I tried to remove that and instead of mapping the elements I thought of manually placing them and giving the ids by which I could have greater control over the css. While trying that I couldn’t make it work as in smaller screen heights it still looked terrible.

At this point I was losing hope. I was wasting time watching a anime series just so I could avoid working on this. I tried thinking out the solution but nothing came in mind. Later when I was messing around with css throught the developer tools on the browser I realized the I could change the height of the image container to change the positioning of the moves as the moves are postioned on the basis of the image container. Now below 1440px the height of image container is 90% and below 1024px it’s 80% and I have a max-height value set for safety. It’s not prefect but it’s much better and I’m relieved 😌 .

The mobile design uses a image contaning the main image and all the moves as there’s no animation on mobile devices. I made the image in fimga and using clamps and % values I think it’s decently responsive.

To make the pages responsive I am using the developer tool in browser to first figure out the min and max values and the putting that value into clamp calculator to generate values. I am constantly switching between vscode and browser for this and if you have a better way to do it please lemme know. Okay the devlog has turned very long so biee…