Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Left side of Wordpress Site cut off on Mobile Devices

Posted on 2013-11-13
15
Medium Priority
?
597 Views
Last Modified: 2013-11-15
I am helping a client with a site that was designed by another designer. For some reason the left side of the site is cut off on all mobile devices I have checked it on (iPhone, iPad, Android) yet it looks great on a computer screen. I thought that it might be because the site was not designed to be responsive but wouldn't that at least give me a scroll bar so I could see the left side content?

I am hoping that someone can point me to the guilty code.

www.shaireproductions.com

Thanks for the help in advance.
0
Comment
Question by:nickcaruso77
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
  • +1
15 Comments
 
LVL 33

Expert Comment

by:Paul Sauvé
ID: 39647980
Are the Wordpress mobile options activated??? Go in to the Dashboard -> Appearance -> Mobile: http://YOURBLOGNAME.wordpress.com/wp-admin/themes.php?page=mobile-options.wordpress mobilehttp://paulsaute.wordpress.com
0
 

Author Comment

by:nickcaruso77
ID: 39648328
Thanks for the advice, unfortunately this site uses the Twenty Eleven base theme and that does not appear to be an option.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1500 total points
ID: 39648337
The code is pretty much crap.  The specific problem starts right from the body which is using position absolute.  That pretty much prevents anykind of responsive layout.

More seriously the HTML validator throws 15 errors before bombing out (unable to continue) at line 355 where there is a severe structural error whic appears to be repeated several times after.  

What you have is junk, and it needs to full re-write.  If the crap and errors are being geratted by the theme or template them dispose of them and find a new one.

Cd&
0
Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39648341
If you are stuck with the existing theme; then garbage in...garbage out.  Start hacking because you are not going to salvage it without a lot of coding.

Cd&
0
 
LVL 33

Expert Comment

by:Paul Sauvé
ID: 39648358
Test out other themes to try and fix the problem. You can't really recode these themes, so you have to find one that works. I know that you can use css (if you have wordpress.com) to override the theme if you purchased the Customization upgrade!
0
 

Author Comment

by:nickcaruso77
ID: 39648523
That is what I was afraid of. I was just double checking if there was a quick fix rather than having to redo the other developers work. The client is very happy with the look of the site so I will have to try to clean up the other developers work as much as I can while still keeping the aesthetics of the site.

Thanks for the info!
0
 

Author Comment

by:nickcaruso77
ID: 39648540
Thank you COBOLdinosaur,

I missed this part before I closed out the topic, but any additional help will be appreciated.

Do i need to submit a new question since I closed this one? I am obviously new to this site. :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39648561
I think you are probably going to need advice as you work through it, So you might want to hold off until you know what you are going to need help with.  When you do post make sure to include the Wordpress topic.  Jason, the top-expert in Wordpress is also one of the most knowledgeable WP Experts on the Internet and he may be able to save you some time and effort.

Cd&
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39649984
I haven't had a chance to check the site from anything other than my tablet so I can't comment on the coding yet.

Was this a theme bought from Themeforest?
0
 

Author Comment

by:nickcaruso77
ID: 39650301
Hi Jason,

This is just a child theme based on the Wordpress Twenty Eleven theme. This client is a graphic artist and has a tendency to describe things to web developers in ems and measurements that become way to rigid and absolute. (I built a flash site for her years ago and it was the same way).

I am not sure if her other designer hard coded in measurements that I am just missing or what. I am not a stranger to Wordpress trouble shooting, but this glitch is giving me a bit of a headache. I would love to find a way to have the page display properly (if possible) without having to reinvent the wheel. She loves the look of her site and is VERY specific about the visual aspects of it...I know she will not be happy if I have to scrap all of the existing work to start over.

After that is fixed I can then approach her about the markup/validation issues and the costs associated with that.

I appreciate any help you can offer.

Thanks!
Nick
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39650321
Well, s/he may be an awesome artist but they don't know their CSS all that well (if they are the ones who made the changes).  If you did the following, I'd be curious to know what you were thinking.

The culprit is most likely the following:

body {
    background: none repeat scroll 0% 0% rgb(226, 226, 226);
    position: absolute;  <----------------- Why?
    left: 50%; <---------------- no, really.  Why?
}

Open in new window


Why are we positioning the body tag?  Next culprit:

#page {
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    position: relative;
    left: -50%; <-------------- Combined with the above, you get the cutoff left.
    margin: auto;
}

Open in new window


If you remove the targeted CSS rules, that should fix the display without hurting anything else.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39650341
I am not a stranger to Wordpress trouble shooting

This isn't a WordPress issue.  WordPress is present but crap CSS is crap CSS :)

I know that you can use css (if you have wordpress.com) to override the theme if you purchased the Customization upgrade!

paulsauve, almost no one asks about wordpress.com here.  Those users have a decent support forum at wordpress.com and very rarely venture out into the bigger internet in search of answers.  When answering questions on EE, assume it is self-hosted WordPress and answer accordingly  :)
0
 
LVL 33

Expert Comment

by:Paul Sauvé
ID: 39651608
@ jason1178 - Thank you for the information! I'll keep that in mind in the future.

PaulS
0
 

Author Comment

by:nickcaruso77
ID: 39652184
@jason1178- That was exactly the problem! Thank you so much, I would give you 1,000,000 points if I could.

I will also suggest to my client that she find a little money in her budget to clean up the css code to eliminate further problems.

Thanks again!

Nick
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question