iPad web page display problem
I have a problem with a single page which does not display properly on an iPad, yet all the other pages on the same website display correctly.
This page: http://www.lawrencecreativephotograp...ut/index.shtml
Is shrunk down on the iPad screen because, I believe, there appears to be a black element on the right side of the page which is the same height as the page and about 1/3 of the width of the original page.
This same page looks correct in all my other computers with different browsers.
I have this same problem on another website I am building, but on this website it is happening on all of the pages.
Seeing all the pages on the first website use the same CSS, I don't believe the problems is with the CSS.
Here is the HTML code for this page:
Can anyone help with this problem?
<title>Lawrence Creative Photography - Home</title>
<meta name="description" content="Lawrence Creative Photography">
<meta name="author" content="Lawrence Keeney">
<meta name="copyright" content="Lawrence Keeney">
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="../css/main.css">
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="../css/nav.css">
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="../css/banner.css">
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="../css/footer.css">
<!--[if lt IE 9]>
ga('create', 'UA-48451236-1', 'lawrencecreativephotography.com');
<div class="frame2"><p>ABOUT US</p></div>
<div class="frame4"><p>DANCE & PERFORMANCE</p></div>
<div class="frame6"><p>CONTACT US</p></div>
</div><!-- end nav -->
</div><!-- end navigation -->
<!--<h1>Lawrence Creative Photography LLC</h1>
<h2>"Performance Art Photography"</h2>-->
<img src="../images/logo-110H.png" alt="Logo" />
<img src="../images/LawrenceCreative-80H-Black.png" alt="Lawrence Creative Photography" />
<!-- end logo -->
</div><!-- end banner -->
<h3>- About Us -</h3>
<img src="images/LarryPortrait.jpg" alt="Lawrence Keeney" />
<p>I am the owner and primary photographer at Lawrence Creative Photography LLC.</p>
<p>I have been photographing models, actors, singers and dancers for many years. Recently, I have been concentrating
on photographing dancers in an attempt to capture great action jump shots. </p>
<p>While the majority of my photography is shooting portraits, I have also photographed products, food, jewelry, industrial, and corporate events.
I have traveled half way across the country to do a number of different on-location industrial shoots.</p>
<p>I developed a unique lighting technique for lighting quilts which emphasizes the texture of the stitching on the surface
of the quilts, and gives it a "3D" look. I now photograph quilts for a number of different people who make quilts and
quilt patterns. My quilt photographs are being used on the packages of quilt patterns sold in a national fabric store all around
<p>I pride myself on making every photo shoot a relaxed and fun experience.</p>
<p>My Mission Statement is simple: "Provide great products at reasonable prices, and ensure our customers
are happy with the experience."</p>
<img src="images/Signature.png" alt="Lawrence Keeney signature" />
</div><!-- end content -->
<p>All images © Copyright 2014 Lawrence Creative Photography LLC <br />
Website Design © Copyright 2014 Lawrence Keeney<br />
All rights reserved.</p>
</div><!-- end footer -->
</div> <!-- end page -->
Last edited by jedaisoul; 03-11-2014 at 09:12 AM.
Firstly (because the statement jumped out at me), when you are talking about the way something looks on a webpage, it is always about CSS. The other pages may appear correct because as the content and page elements change, the CSS being used will change.
It looks like for this page your 'signature' element is causing a problem. Because it is positioned relatively and is a block element, it maintains it's full width (based on its parent element) but is being moved to the right, forcing the page to extend further right (under lower resolutions). There are a couple of ways to fix this. You can try something like this:
The last 2 lines of CSS are for older versions of IE. They typically don't like applying inline-block to block elements. Which is why an alternative solution would be to change that element from a <div> to a <span>.
Thank you, thank you.
Originally Posted by Sup3rkirby
I would probably never have figured this one out.
When I get back to the office in the morning I will check this out.
Just a quick update... (not sure where my mind wanders off to sometimes)
You could simply use 'display: inline;' in the CSS instead of those 3 lines I have. Both 'inline-block' and 'inline' should work, but you won't need the IE fix with 'inline'. This would probably be the simplest fix.
I couldn't wait until the morning to take a look at this. I solved the problem by just specifying a width of the offending item.
Originally Posted by Sup3rkirby
This also solved a similar problem on another website where the offending item was in the footer so it effected all the pages on the website. One simple width statement solved the problem there too.
Last edited by lkeeney; 03-11-2014 at 12:31 AM.
I don't want to really jump too far off-topic with this, but I do feel I should note a few things that might help you with potential future similar issues, and to improve the site overall.
You do need to be careful with setting absolute widths around the site. I noticed the '#page' element has an absolute height set, however not all pages fill this height with content, leaving you with empty space that you can scroll down to. It's much like what was going on with that signature element, but vertically.
Try using properties like 'max-width' to help prevent elements from forcing your page to extend beyond the content in any direction. Typically, your main content container should have a 'max-width' of 100%. This allows your site to display on mobile devices (and all resolutions) much better as it prevents horizontal scrolling, which is typically undesirable. You have several absolute widths set for various elements, which means that no matter the resolution of the device, your page will always be that width (even if the device resolution has width less than 960 pixels). You can still use the absolute widths, but they should be followed up with a 'max-width: 100%;' to allow your site to scale better across all mobile devices.
It's nothing dire to your site, it's just a suggestion. For these same reasons using something like 'display: inline;' on any element that doesn't need to stretch and fill a space will work out better overall (as its width is automatically determined by the content inside, which is an image in your case).
I thought I had responded to your reply earlier but I must not have saved it.
In any case, thanks for the additional suggestions.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)