Media Queries And To Adapt The Ready Made Site

I am now having to adjust my current site to fit it into a smaller desktop screen size. It is viewable on all screens, only with smaller ones like 14', it creates a scrollbar on th

Solution 1:

You can either:

• Alter your current stylesheet so that it works on smaller devices (14" isn't that small, so this might be a good option). This would be a simple way to get rid of the scrollbar.

• Write a separate stylesheet that applies only to certain devices, and use media queries to target the devices you want (for example using the min-width, max-width expressions). This means you can tweak the stylesheet for smaller devices as much as you like and not risk breaking the page for larger devices.

PhoneGap is a good example of a website who's stylesheet changes as you resize the screen.

Solution 2:

Since you've already got stylesheets and a website written, it's harder to do from scratch.

But you can add

@media screen and (min-width: ###px) and (max-width: ###px) {
    .sample { /*stuff here */ }
    body { /* stuff here */ }
}

to the bottom of your style sheet.

You can change the ### above to be the min and max widths you need. So you can have like

@media screen and (min-width: 768px) and (max-width: 959px) {

and

@media screen and (min-width: 479px) and (max-width: 767px) {

etc. for all the sizes you need.