Link to home
Start Free TrialLog in
Avatar of Scott Walker
Scott WalkerFlag for United States of America

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!
Avatar of James Bilous
James Bilous
Flag of United States of America image

When the window is less than 1024 pixels your container loses its width due to a media query. Add the following to  your styles to set a width on the container when it goes below 1024 pixels.

@media (max-width: 1027px)
.container {
    max-width: 680px;
}

Open in new window

Avatar of Scott Walker

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 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 class="template-front">
     <div id="header"></div>
     <div class="columns"></div>
     <div id="footer></div>
</div>

Open in new window


div.columns has padding which is probably throwing this off
.columns {
    background-color: white;
    padding-top: 41px;
    padding-right: 27px;
    padding-left: 27px;
}

Open in new window


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>

Open in new window

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.
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.
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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Scott, after reading that, my modified setup is
<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>

Open in new window


Do I need to add another div in between the body tag and the header div?
Thanks for your help!