Home › Forums › Design › Auto resize website for any resolution, then have mobile look exactly the same
- This topic is empty.
-
AuthorPosts
-
August 25, 2014 at 2:59 pm #180590sfosheeParticipant
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!
August 25, 2014 at 3:29 pm #180602nixnerdParticipantYou 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?
August 25, 2014 at 3:38 pm #180606sfosheeParticipantVery 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/
August 25, 2014 at 3:44 pm #180608sfosheeParticipantI 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!
August 28, 2014 at 6:28 am #180918sfosheeParticipantThanks 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; }
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.