CODEWITHSUNDEEP
htmlcssfixed-widthpage-layout
Nitsorn Wongsajjathiti
Nitsorn Wongsajjathiti

Reputation: 317

Viewing fixed page layout on mobile devices

I am using fixed page layout of my website (http://www.oatmeeel.com). It works fine on desktop browsers but not on mobile devices. The website is scaled to fit the browser but the format of some components change. Help please? Thank you!

Upvotes: 0

Views: 3007

Answers (2)

Scott Dallas
Scott Dallas

Reputation: 347

Here's a rough draft of what I use on most my responsive web design projects I start from scratch:

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<style>
body { margin: 0; padding: 0; }
@media (min-width: 728px) and (max-width: 1150px) {
/* enter large tablet style overrides here */
}
@media (min-width: 420px) and (max-width: 727px) {
/* enter medium tablet and large phone style overrides here */
}
@media (min-width: 1px) and (max-width: 419px) {
/* enter small devices and phone style overrides here */
</style>
</head>

<body>
Website body here
</body>

</html>

The < meta name="viewport" .. > line in the < head > makes your responsive page look normal on mobile devices. Without it, your website looks zoomed way out on a mobile device and text gets hard to read.

Upvotes: 0

mechanicals
mechanicals

Reputation: 685

Convert all you fix width Containers to percentage. You anyhow want you website to fit to screen. So, instead of using the 

width: 1442.88px;

which you are using. Covert this to 100%. And also, create percentage layout (fluid layout) for the website. You might also need to use "media queries" to rearrange the elements if needed.

Look for these two terms:

Percentage Layout(Fluid Layout) & Media Queries.

You'll be on your way to fix the issue you are facing. Still if you want any specifics, let me know.

Upvotes: 1

Related Questions