We seem to be having an issue with one of the pages on our latest website. All pages appear correctly on the iPad & Kindle apart from the contact page which displays at a smaller width. When checking the page the width settings are the same as all the other pages on the site.

The pages display correctly on all other platforms and browsers. This just seems to be an issue with mobile devices.

Any help would be appreciated.

The site can be viewed at www.somethingbluebrides.co.uk

Did you run the site through a HTML and CSS validator?

 

Sometimes if a tag is unclosed or some other similar issue some browsers will fix it automatically but others won't. It could be that you are stumbling on an error that most browsers fix on their own.

This is odd as you aren't actually stating any media queries or changes in the CSS to change the site in anyway when it is on mobile.

 

Looking at the code there is a random 'val' outside of the content area on the contact page but not on the other pages.

</div><!-- End centre-cu div -->            
    <br class="clear" />
val</div><!-- end scrapbook-page -->
 

 

Thanks for your comments. They're much appreciated.

 

lesshardtofind - Yes I did run it through validators. I use Validator S.A.C on OSx for the html and have used the online W3C validator for the CSS. There are a couple of errors with the form that will need to be sorted but I don't think this will be causing the problem, although with the way code behaves sometime I'm not writing it off completely.

 

junior - thanks for spotting the random 'val' which I have now removed on our test server. This hasn't resolved the issue but has at least it has removed an error. It's strange how you can go through code and not spot simple thing like this.

 

I'll look through everything again to see if there is anything else I've missed.

add meta viewport name and content inside the header position (i,e)

 

<meta name="viewport" content="width=device-width">

 

and then add the media query to the css styles document (i,e)

 

@media screen and (min-width: 400px)  {/* css style code for mobile device*/}

 

 

If you want change the dimensions based on your device resolutions.

I take it you have fixed this as I cannot see any problem with this?

Thanks for the comments.

 

Veeramanikandan - We already use the viewport meta tag but I have made a not of the other one for the css. The only page that we have a problem with is the contact page so I can't see this being the problem but it is useful to know.

 

lakey - No, the problem hasn't been fixed. If you view it on an iPad you will see that the page displays at a smaller width to the other pages. I think I will have to remove one item at a time until I find what is causing the issue. It's a bit of a strange one.

use the media query width size based on your device screen size.

 

And measure the width as "%" instead of "px" .

 

use the css codes are very carefully.