Making Your Website Fit the Screen on All Devices | Jo Linsdell

Making Your Website Fit the Screen on All Devices

As you probably know by now, I'm in full prep mode for this years Promo Day event that will be happening on Saturday 30th May at www.PromoDay.info. As I like to try and improve the event each year I've been going over the feedback, comments, and testimonials from past events. One thing that has been mentioned by a couple of people is the sizing of the website i.e. it doesn't fit their screen. There were actually only 2 or 3 people that had this issue but that still makes it a problem in my book and so I'm working on resolving the issue.

I checked the website on my smartphone, tablet, laptop, fixed computer, and MAC, and it looked fine on all of them. This made me think that either the problem was 1) specific to the users computer settings or 2) only an issue on certain sized screens.

The first thing I did was make sure that the website was mobile friendly. I then checked it at http://www.studiopress.com/responsive/ to make sure all was working as it should be. This website allows you to insert your website url and then it checks and gives you a preview of how it looks on different mobile devices. All good. www.PromoDay.info is mobile friendly on all devices.

The next step was to check how it was showing on different desktops. Like I said before, I didn't find any issues when checking on my own various devices but then again mine are all pretty mainstream sizing. 

Anyway, I went to http://quirktools.com/screenfly/ and inserted the website url. Turns out the website is fine until I go up to 20" desktop (that's 1600 x 900) and larger. This means that user on a screen bigger than 20" get scroll bars in order to view the whole website. Not a big problem as I made sure the website was centered (notice the space on the left and right of the screen), but still not perfect. 

This is how the website looks on a 15" desktop:

Making Your Website Fit the Screen on All Devices

As you can see the whole page fits the screen.

This is what came up when I did 23":

Making Your Website Fit the Screen on All Devices

Not good. Only a part of the page is viewable. You then have to use scroll bars at the bottom and right hand side in order to view the rest of the page. Whilst this isn't a major problem (the most important elements are viewable e.g. all of the navigation tabs), it isn't ideal either. I'm now looking into ways to solve the issue and make the website automatically fit to all screen sizes.

I did find this app for Chrome that allows you to resize your desktop to different screen dimensions https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh. This means that those of you that get scroll bars can change to view the website at 15" (1366 x 768) and have it fit your screen. 

I hope to be able to come up with a solution as soon as possible. If you know how to resolve the problem please get in touch. Thanks in advance for your help. 

 UPDATE: 

 I think I found the solution :)

 I inserted this html code under <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

 I've had a few friends with 23" and above check the website and they've all said it looks good. No more horizontal scroll bars. 

 Thanks to everyone who helped. You rock! 

1 comments

  1. Jo Linsdell9 April 2015 at 15:46

    Problem resolved!!!! :D

    I added some code to the html under "head" and it seems to be showing fine on all sizes now.

    ReplyDelete