One of the biggest challenges I have been facing is making a responsive website that automatically adjusts to whatever screen size the site is being viewed on. This is important because nowadays so many people use their phones or tablets for browsing the web. If a website doesn’t work for people using mobile devices, traffic may be greatly reduced. In addition, searching algorithms such as the one Google uses will automatically scan websites to see if they are mobile friendly. If they aren’t they are moved lower in search results. Considering all of this, having a responsive website is very important.
So to make my website more responsive, I started using JS to take into account the window size that the site is being viewed on. If the screen width is small enough it is supposed to automatically adjust the size of the buttons and font, as well as shifting some margins around to make the page flow better. This seemed to be working fine, though I didn’t realize that something was wrong with the code to resize the buttons.
Not realizing that the buttons weren’t working correctly, I continued with trying to modify the rest of the page. Specifically, I wanted to shift an image to move from next to a paragraph of text to above it when the screen is small. However, absolutely nothing was happening when I modified the JS. I tried to change the float, the size, and even resorted to setting the display to hidden. But the image was still there unchanged no matter what. It was immune to my attempts to destroy it. I spent weeks messing with it in my free time. But I had no luck until late last night.
That’s when I realized that the buttons weren’t resizing either. To test out and see if my function was even being called, I threw in an alert() to see if the code would be reached. It wasn’t. That’s when I remembered, if one part of a JS script doesn’t execute correctly, it stops the rest of the script from being run. To test if that was the case, I removed all of the code for resizing the buttons, and all of a sudden the image moved to where I was trying to get it to go! So this whole time, the portion of code to move the image the whole time was working, it just wasn’t being reached. Lesson learned: double check the code conventions.