zenglenn42 / utbc2019-hw-02-portfolio

Responsive portfolio using bootstrap and related technology.

utbc2019-hw-02-portfolio

Overview

This week, we build a responsive, bootstrap-based, portfolio template for documenting intersting stuff we've done.

Specification

The full problem assignment can be found here.

Demo Day!

The hosted solution resides here. The 'Contact' page includes an email submission form. However, since we're only dealing with front-end HTML and CSS at this stage in the curriculum, the form is not live.

Attribution

I've borrowed some ideas from Lea Verou's CSS Secrets book for sticky footers and intrinsic sizing of portfolio items sketched out here and here.

Emulator Screen-Shots

On phones, the layout looks like this:

On tablets and desktops, it looks more like this:

utbc2019-hw-02-portfolio's Issues

media query doesn't fire on small viewports at expected width/break-point

I've got the following CSS which styles the text of my main content area (with 'About Me' verbiage, for example):

main p#main-content {
  color: gray;
  font-size: 0.9em;
}

@media screen and (max-width: 640px) {
  main p#main-content {
    color: red; /* DEBUGGING! */
    background-color: #aaa;
  }
}

My expectation is that at a viewport width of 640px or less, the text color should change to a debug-friendly red.

I actually see the desired responsive behavior for 2 out of 3 of my pages (portfolio and contact), however on my 'about me' page, the text doesn't turn red until the width is 576px or less.

I'm testing with the chrome browser (v 73.0) on macOS (v 10.13.6) and manipulating the width of the viewport by sizing the width down on the browser.

The same behavior should be observable on my deployment website:

https://zenglenn42.github.io/utbc2019-hw-02-portfolio/

For example, at 639px viewport width, I see:

It's not until viewport width is 576px or less that I see the expected:

On smaller viewports (< 640px) the portfolio item margins don't auto center.

For smaller viewports, I'm seeing this:

Testing on macOs on chrome and firefox.