Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 610
  • Last Modified:

Left side of Wordpress Site cut off on Mobile Devices

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
nickcaruso77
Asked:
nickcaruso77
  • 5
  • 3
  • 3
  • +1
1 Solution
 
Paul SauvéCommented:
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
 
nickcaruso77Author Commented:
Thanks for the advice, unfortunately this site uses the Twenty Eleven base theme and that does not appear to be an option.
0
 
COBOLdinosaurCommented:
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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
COBOLdinosaurCommented:
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
 
Paul SauvéCommented:
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
 
nickcaruso77Author Commented:
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
 
nickcaruso77Author Commented:
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
 
COBOLdinosaurCommented:
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
 
Jason C. LevineNo oneCommented:
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
 
nickcaruso77Author Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
Jason C. LevineNo oneCommented:
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
 
Paul SauvéCommented:
@ jason1178 - Thank you for the information! I'll keep that in mind in the future.

PaulS
0
 
nickcaruso77Author Commented:
@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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now