Finding the Needle
This week was a deeper dive into JavaScript. The concepts were becoming more clear as I remembered the similarities and parallels when I was learning Python a year ago. The simple aspects like arrays and functions can turn into crazy and intimidating code when compounded on each other, however; when reading through line by line they can be broken down into their simple concepts again.
Getting to the small things. I am using Bootstrap to build my portfolio site. Being a naturally organized person I love the control and organization Bootstrap offers. So going through the documentation and a few tutorials led me to integrate it into my site that was already built.
Note to self: Next time just start from scratch. It was challenging integrating the framework and seeing the functionality since there were so many integrated components already. So, I started over with a french press of coffee.
I was excited when I built the Navbar and Jumbotron giving my personal website the layout I wanted. So far so good.
Then I added a picture that my wife and I took a while to shoot to make sure I looked as good as I can on screen (a challenging endeavor!). Here is where my weekend turned into a long winded journey of confusion. My picture, after turning it into the masterpiece, (clear throat)via software was added to the Jumbotron and a text block next to it.
Nice! A little higher I decide. Some CSS input and moved to where I wanted it. Better.What? Navbar doesn’t work now?
Undo CSS = works, move a little higher !=work.
To spare you lines and lines of complaining I spent the weekend troubleshooting and researching every possible issue. Developer tools and I are now well acquainted and I think there doesn’t exist a Bootstrap video on YouTube that your’s truly did not view.
Spoiler alert: The issue wasn’t even in my code, even though that was my assumption since I was a novice with Bootstrap. No, my code was good, it was the fact the even though I saved my picture with a transparent background as a SVG (and every other possible type) the background shows up as real estate on the website. So the larger background was inching (or pixelating?) it’s way into the Navbar area making it non-responsive.
The good news. This always seems to be the way I learn the most information and can be summed up as a bittersweet problem that in the end has led me to never make this mistake again, and taught me so much more about Bootstrap like:
- You can change the actual Bootstrap boilerplate code.
- You can actually add the img in CSS as a background image and link it to a div in the HTML file.
- Img-fluid is the new Img-responsive.
Final thought: Always look at what you are not looking at.
— Brad
