Modifying a webpage so it's more mobile/tablet compatible

Question

SO, I'm looking for some help making a fairly simple page more mobile/tablet friendly as currently on certain mobile devices it appears pretty ugly :S I've tried positioning stuff correctly and used pixels rather than percentages because I'm only really doing stuff in each corner (top and bottom bars) and I've attempted on incorporating some scaling aswell as code to make the images not display at certain screen width's Can anyone help correct my html/css so that it's fully compatible as it never quite works when I make changes. HTML: ``` Website.com

Accepted Answer

There are several ways to accommodate Mobile/Tablet devices with your website.

FIXED DESIGN

Create a stylesheet that works generically across all formats. Your site will appear the same on all devices but this process will be the simplest solution.

The fixed design process should primarily use percentages and max-widths to create content that changes based on the device width.

PROS

When used well this process uses least resources and is faster to create and modify.

CONS

If your site has large amounts of content on a page then your site can become very cramped on smaller devices

RESPONSIVE DESIGN

If you want your site to be viewed differently and arguably optimally on different devices then you need a responsive design. This can be achieve by using a dynamic stylesheet or by using multiple stylesheets for different devices.

PROS

A very versatile website that can be display uniquely and optimally based on the viewing device.

CONS

Larger or additional resources and marginally longer loading depending on design. Longer development and modification times.

CREATING RESPONSIVE CASCADING STYLESHEETS

It is no longer practical to use set width becuase there are simple to many varible sizes. The answer is flexible everything.

Using a viewport metatag as in your example to target the device that is accessing your website.

`<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>`

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites.

Using media queries.

Media Queries let you write individual rules for specific screen widths.

```
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
```

- Using Javascript.

A good javascript solution other than bootstrap is jquery mobile which takes away the time and effort of designing a responsive site by doing the work for you. You do not need to know or edit any javascript to use it.

SPECIFICS

So now we have the options lets take a look at your specific issue. Your website actually seems very responsive already. and is well laid out for both mobile and PC using the fixed design.

CHANGE YOUR MEDIA QUERIES (They wont work without brackets)

FROM

```
@media screen and max-width 600px {
    .headimager {
        display: none;
    }
}

@media screen and max-width 450px {
    .footimager {
        display: none;
    }
}
```

TO

```
@media screen and (max-width:600px) {
    .headimager {
        display: none;
    }
}

@media screen and (max-width:450px) {
    .footimager {
        display: none;
    }
}
```

I would advise against using a table (#gradient-style). A simple 100% div (#container) will do the trick with floated or %width nested elements. Also the text in container wont auto wrap without spacing of css wordwrap:break;

Other than that there are no more noticeable problems but please do add a comment if you require specific changes.

Modifying a webpage so it's more mobile/tablet compatible

Solution

Problem