How many consider screen height when creating web page

Hi just wondering how many consider screen height when creating a web page … I have being working on my profile page and making it responsive and all was going well (started on my work computer) when i got home loaded it up on my laptop and wow it didn’t look right … i had a main section of my about section fixed and could not see it , and a background image in a dive was not going across the full width of the screen… it was then i realised my laptop screen was wider but smaller than my work computer and I had only considered the width when making the page responsive.

It means i have to think more about placement and how i use absolute: fixed and … size of div from now on. luckily i am able to adjust things as i’m using media queries (a bit tricky as i’m new to them)

How do you handle screen heights as I just discovered the big difference in screen heights between my work computer and my laptop really had a huge impact on how my web page looked and i hadn’t even thought about what it would look like on other screens. Had only considered would it fit on a phone.

Try searching for chrome add-ons that help you test for responsive design. I’ve used these two to good results:

Responsive Web Design Tester
Mobile/Responsive Web Design Tester

It’s not a perfect solution but it does give you a general sense of how things work

thanks … just found this site should do the job … not only that i can put a page in and write in the html and css while in the test area and it updates … must check can i do that when using brackets. This will really help me know how my pages look on various screen sizes

1 Like

Hey nice find! :smiley:

I use Firefox’s responsive design view. Chrome also has this as well. Probably useful if you’re working offline for some reason (and it’s also a few keystrokes away). But I guess screenfly is packed with more features.

Screenfly looks quite good. I work offline but I’d definitely use it if I was developing on codepen.