Responsive Website

Responsive Website - student project

My code can be found at codepen.io at the link below.

https://codepen.io/GloRusso/pen/XWjqJqL

Full size webpage includes an outline, which disappears when reduced to 640px and the background colors change to shades of green.

display: grid; was used instead of flex. The boxes of color were defined by height in pixels, but the width used a percentage so they would expand as needed. This caused a problem when reducing the box size, as the type would have to be re-centered accordingly.

Now that I have a working <html> framework, I can experiment with flex-box then decide which works best for this type of layout... (later).

Full size:

Responsive Website - image 1 - student project

Under 640px width:

Responsive Website - image 2 - student project

I had to do a little research because my code just wasn't working with the grid design. My problem was that I was trying to align rows defined by a "row" class, but creating rows is done automatically when columns are defined. My computer is much like a teenager. If you tell it to do something it already does, then it stops! Once that error was figured out and the row class was deleted, my grid fell into place.

Thank you Kalub, for another challenging class.

Glo Russo
Always Learning...