Create a Simple and Stylish Node Express App

Blog Discussions
, , ,
9

hi dan,

great tutorial. i am picking up a good bit from it so far and am looking forward to moving on to the ‘good’ part with authentication. however, i am a bit stuck when it comes to the css for the site. i’ve just replaced the basic style.css (with the aqua background) with that contained in the gist. when i save and browsersync reloads the content is all loaded below the page, as in, i have to scroll down past a white screen to see what would be the header “WHATABYTE” text. by trial and error i was able to narrow the issue down to this part of the css:

html, body,
#root {
  height: 100%;
  width: 100%;
}

with that commented out, the page loads almost as expected. as soon as i uncomment and save; back to a white page.

i can narrow it further down to the single line:
height: 100%;

the issue is with the height commented out everything is a little bit s-t-r-e-t-c-h-e-d out. i am not too confident about moving on to images with this artifact in place. also, in your example image it appears the h1, h3, etc text is on the left hand side of the page, while i am seeing it centered across the middle.

i have tried this in both chrome & safari just to be certain it’s not safari (my preferred browser) acting like a jerk in this case.

does this ring any bells? can you suggest anything i can change to get the desired effect? for now i will carry on with the height commented out, but i have a feeling that things are going to be heading downhill from here.

-c.

1 Like