Project Management 3

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.

Screen Shot 2017-05-22 at 12.40.15 PM.png
About section coded using 27″ iMac (Uni computers)

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.

Screen Shot 2017-05-22 at 12.39.38 PM.png
About section coded from 15″ laptop > Viewed it in iMac

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.

Advertisements

2 thoughts on “Project Management 3

  1. Hey Stef! You’re progressing very well and quickly with your website! You must be working extra hard haha. Your about page is looking very nice and clean. Just as a suggestion, maybe play around with the font-weights of your “about” paragraph to highlight the important information like what and where you’re studying, and maybe even your passions like photography, videography, UX design and web development. At the moment, it’s looking very plain and almost too text-heavy, so maybe if you highlight some words it would allow the users to skim-read and read the information they need. I’m not too sure if this would look nice but it’s just a thought to help filter the important information on your about page. Hope you continue to work hard on your webpage and good luck!

    Like

  2. Stef, I admire your visual eye. The use of colour, text lead and space communicates a positive mood and order to your portfolio. The thorough adjustments you made this week are clearly reflected in your work. In terms of the page compatibilities, I suggest investigating your .css specifications and converting the major px; elements to % – this is will translate to most browser and screens. The copy text would benefit from being a little clearer i.e. size or weight. Best, Ana-Janine.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s