Scott Walker
asked on
How Fix Width of WordPress Mobile Site
Hey all, I'm building a wordpress mobile site at http://dev.m.kyprodj.com/, and I'm having an issue that can be seen on a mobile device (or while emulating one in chrome's device emulation), which is that the site has whitespace along the entire right site, even though the header and footer images are set to 100% width. How can I figure out what is causing this?
Thanks!
Thanks!
ASKER
I'm still experiencing the same issue in both Chrome's Emulator and on my iPhone. Any other ideas?
Hi,
This is site is not display well in almost any size...
You may like to take a look to Bootstrap or mobile theme from themeforest
http://themeforest.net/category/wordpress
This is site is not display well in almost any size...
You may like to take a look to Bootstrap or mobile theme from themeforest
http://themeforest.net/category/wordpress
ASKER
This site is built on thesis, so it is very customizable, so any suggestions to make what we have work better would be much appreciated!
Your layout is
div.columns has padding which is probably throwing this off
Try this pattern instead where the container class defines the width/padding so they are same for each section. Remove at styles from the ID's where possible and at least remove things like widths, padding and margins.
<div class="template-front">
<div id="header"></div>
<div class="columns"></div>
<div id="footer></div>
</div>
div.columns has padding which is probably throwing this off
.columns {
background-color: white;
padding-top: 41px;
padding-right: 27px;
padding-left: 27px;
}
Try this pattern instead where the container class defines the width/padding so they are same for each section. Remove at styles from the ID's where possible and at least remove things like widths, padding and margins.
<div class="template-front">
<div class="container" id="header"></div>
<div class="container" id="body"></div>
<div class="container" id="footer></div>
</div>
ASKER
Thanks for your response! I tried that, and it removed the space on the left, but not on the right. It is on the site right now if you would like to see it.
ASKER
I really appreciate the responses so far, they've certainly helped! Does anyone have any other ideas? We're so close!
It looks like the theme you are using is much different than the look you are trying to use. http://diythemes.com/demo/?skin=thesis_pearsonified It has the logo on the left and nav on the right with just a few nav items. What about changing to efectus? http://diythemes.com/demo/?skin=thesis_effectus
Otherwise, we can work on updating the css, but just know one change may domino to something else.
Otherwise, we can work on updating the css, but just know one change may domino to something else.
ASKER
Effectus looks like it may work, however we're already beyond our budget, so it'd be ideal if we could do it with the existing theme and use css. Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Scott, after reading that, my modified setup is
Do I need to add another div in between the body tag and the header div?
Thanks for your help!
<body class="template-front customize-support" cz-shortcut-listen="true">
<div id="header" class="container">...</div>
<div id="body" class="container">...</div>
<div id="footer" class="container">...</div>
Do I need to add another div in between the body tag and the header div?
Thanks for your help!
Open in new window