Auto resize website for any resolution, then have mobile look exactly the same

[sfoshee]

I am working with the WordPress Decode theme. I have been tasked with getting the pages (which are not supposed to scroll) to appear the same regardless of screen resolution. Then the mobile site should look exactly the same on phones as it does on the laptop (no scrolling, and no optimization). Please, does anyone have any help on this? Their old site on Joomla did this, but I’m not sure it can be done in WordPress. The site is: http://lallabee.com/wordpress/

Thank you very much for any help you may have to offer!

[nixnerd]

You have quite a task ahead of you. I don’t say that facetiously… but rather realistically. There are so many things that are different about mobile that I don’t think it can look “exactly” the same. Let me guess… your boss asked you to do this. And… your boss knows just enough about webdev to be dangerous. Am I correct?

[sfoshee]

Very much so. The problem is that the site they had before, in Joomla, did this exact thing. That site address is http://www.lallabee.com/beta/

[sfoshee]

I think that if I could get the auto resizing working for any resolution, I might be able to show them how the optimized mobile is preferable. Right now I have a fixed page height in CSS Stylesheet editor:

#primary {
    height: 400px;
}

But that cuts them off at the bottom with their different resolution (they do not want to have to scroll) and it messes up some of my current mobile pages. Any thoughts on this? Thank you!

[sfoshee]

Thanks for your input everyone. OK, I finally got the issue resolved. I hope it helps someone else out there. I’m in WordPress Decode theme. This floats the bottom custom menu at the bottom (in the footer), turns its background white, and sets padding so the page text scrolls above it without going behind it. I set the height at 57 so mu menu buttons would show in mobile.

body {
    overflow: scroll;
}

#colophon {
    background: white;
    bottom: 0;
    font-size: 13px;
    height: 57px;
    position: fixed;
    padding: 0 30px;
    margin-bottom: 0;
    width: 100%;
}

.entry-content {
    padding-bottom: 30px;
}

[Author]

Posts