6 replies [Last post]
regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 8 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

There must be a div that is too wide and I’ve been looking at this site too long and cannot see why on ipad the header bar and footer are indented. Here’s the link to the test site http://bit.ly/1dTac8E. This does not happen on the home page only on the inner pages and the site is fine on desktop and in Chrome device tester.

Any insight much appreciated.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 8 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Oops, correction, this is

Oops, correction, this is happening on all the pages including the home page.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Media queries?

I don't see your media queries. Are you browser sniffing server-side, or with javascript? If so, you're asking for troubles. That was a bad idea even at the height of the browser wars.

More info, please?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 8 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Thank you so much for your

Thank you so much for your reply.

There are no media queries, the client and designer did not program that into their budget. Originally I built the site with a wrap content at 940px and margin 0 auto so it would fit within an iPad with no Media Queries, but then got major flack from the designer as he wanted wider space on each side of the wrap content to scroll down the sides on iPad. Apparently the 940px content was not giving him that amount of margin on each side. So then I changed to 1024px width and 40px padding on each side and I think that's where the problem happened. I must confess that I did not quite understand myself why a 940px centered inner wrap when the iPad is 1024px wide would not leave over 40px on each side in which to place fat fingers to scroll down. Personally I never scroll down the sides, but the designer does and I have to conform to his wishes.

This has been ongoing for 6 months and I have made SO many modifications for the designer that I have lost the plot, so to speak. I am grateful for any insight you can shed on this. Thank you for your interest.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Two mistakes from the git-go

1) Not having elastic pages that adapt to the browser and user's defaults. It is simple and the cost is trivial if planned from the start.

2) Letting a designer run the show is a slam-dunk *FAIL* in the making. Never take a job where the least important member of the team is in charge. A good designer is an asset, but is not absolutely necessary to a site with good content; witness Google or craigslist.

Question: Are you working from a generic template, or something that you were taught one time? The css looks like it was a boilerplate reset by someone who does not understand how floats work, or I should say, has run into a method that does and proceeds to plaster the wall with it; needed or not.

What does all that javascript do? I see no difference when js is disabled. Again, something that leads me to believe it's done from habit rather than compelling reason.

Let me see if I can gin something up this weekend that meets your requirements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 8 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Thanks for your reply. While

Thanks for your reply. While I appreciate your comments, unfortunately I do need the work and the designer is also the project manager and the client is his not mine.

This is a Genesis theme, so yes the floats are all boilerplate reset and all the themes have the same css settings at the outset. The javascript is for the smooth scroll and scroll to top on the Pipeline pages and accordion on the About pages.

Thank you for your help in this. I cannot figure it out, because I cannot see the problem in developer tools in a device simulator.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 5 years 8 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

This problem is fixed

So the problem was when I made the site 1024px with 40px right left padding, the padding added to the width resulted in a too wide inner content.