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!
Harrison WalkerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

James BilousSoftware EngineerCommented:
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

0
Harrison WalkerAuthor Commented:
I'm still experiencing the same issue in both Chrome's Emulator and on my iPhone. Any other ideas?
0
lenamtlCommented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Harrison WalkerAuthor Commented:
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!
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

1
Harrison WalkerAuthor Commented:
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.
0
Harrison WalkerAuthor Commented:
I really appreciate the responses so far, they've certainly helped! Does anyone have any other ideas? We're so close!
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Harrison WalkerAuthor Commented:
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!
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The short answer is you simply need to put the nav to a separate div. To build on what I posted originally.

<div class="template-front">
     <div class="container" id="header">
             <div id="headerlogo"><img src="logo.jgp"></div>
              <div id="headernav"><ul>....</ul></div>
     </div>
     <div class="container" id="body"></div>
     <div class="container" id="footer></div>
</div>

Open in new window


Make sure the items in your header are positioned relative and not absolute.  Currently there is absolute positioning and make sure to check in all media queries.

Example in css.css linke 1266 and 1283 shows absolute and not relative.
@media (min-width: 634px)
.nav {
    position: absolute;
    top: auto;
    right: 54px;
    bottom: 7px;
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Harrison WalkerAuthor Commented:
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!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.