Solved

Left side of Wordpress Site cut off on Mobile Devices

Posted on 2013-11-13
15
556 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
  • 5
  • 3
  • 3
  • +1
15 Comments
 
LVL 31

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
 
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 31

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 31

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now