Stacking containers and making content responsive
After completing my hero section / landing page, I proceeded to create the succeeding sections of my website.
Order: Hero -> Quote -> About -> Portfolio -> Contact
Since my website is a one page scroll-through type, I assumed that my
containers would automatically “stack” one after the other. Although this is correct, I still ran into issues when I started coding it in Atom. I found that my hero container and quote container stacked on top of one another rather than follow the succeeding order. Also, I had to use two different backgrounds for each containers to distinguish which section is which.
Initially, I used the z-index property, but found that this only alter the order of containers but not necessarily its visual placement. Another action I tried is changing the margin property values and manually bring down the next container/section. However, I found that this did not make it responsive when viewing it in a smaller screen and it only shifted my elements ineffectively.
I resolved this issue by using the background-attachment property and setting the value to fixed or scroll depending on the order of the sections. Surprisingly, this worked and has made my website’s visual structure the way I wanted it to be.
One thing that I am currently resolving is how the content inside each section is not responsive. In my about section, I have a short
description of who I am + what I do.
It looked the way I wanted it to look when I coded it using the university computers but, when I viewed it from my 15″ laptop, the text got cut off halfway. I’m not sure why it did this but I made the code changes using my laptop so that it fits perfectly within the screen size.
However, once I checked it again from the iMac computers, it just ended up shifting everything again.
I’m not 100% sure if this is because the units I’ve used were px (which is a fixed unit), that’s why it wasn’t responsive when viewed in a larger screen. I’ll try experimenting with % and em instead, as these are relative units.