0

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!

Nitsorn Wongsajjathiti
  • 317
  • 1
  • 5
  • 19
  • "A pint can't hold a quart" - Margaret Deland - springs to mind. You need to modify the layout according to the device – Ed Heal Aug 22 '15 at 10:13
  • Thank you for such deep quote. But I would like the layout to be exactly the same, just minimized to fit the smaller screens, with everything looking identical to the desktop. – Nitsorn Wongsajjathiti Aug 22 '15 at 10:32
  • You cannot - screen is too small. That is why companies invest in creating web sites for mobile devices. – Ed Heal Aug 22 '15 at 10:34

2 Answers2

1

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.

mechanicals
  • 685
  • 3
  • 14
0

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.

Scott Dallas
  • 347
  • 2
  • 7