Solved

Left side of Wordpress Site cut off on Mobile Devices

Posted on 2013-11-13
15
587 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 500 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

623 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