Right side getting cut off on mobile devices

[llckll]

Hi everyone,

I am working on my church's website and I am coming across an issue which only seems to happen on my iPad or any other mobile devices while on a PC or Mac computer it works just fine...

www.arcolacovenant.org/redesign_index

If you look at the site on a mobile device, you can see that the top gray bar and footer div containers get cut off at the right margins. I would like it to extend all the way to the end. But I can't seem to figure out why this is happening...

Any help will be greatly appreciated and you shall surely be blessed!

Thanks in advance.

[amandaNHT]

Media Queries might help...

For example, I use this for one of my websites:

<!-- Mobile --><link href="include/style_m.css" rel="stylesheet" type="text/css" media="only screen and (max-width:349px)">
<!-- Tablet --><link href="include/style_t.css" rel="stylesheet" type="text/css" media="only screen and (min-width:350px) and (max-width:799px)">
<!-- Desktop --><link href="include/style.css" rel="stylesheet" type="text/css" media="only screen and (min-width:800px)">

<!--[if lt IE 9]>
<link href="include/style.css" rel="stylesheet" type="text/css">
<![endif]-->

Media Queries don't work in old versions of IE, so the "override" at the end there tells IE which stylesheet to use (probably the desktop-version) because if there is a media query in the line, IE ignores it... but I'm pretty sure IE 9+ works fine.

The code above has "Mobile" as any screen 349px wide or less... it has "Tablet" as any screen from 350px wide up to 799px wide... and anything at or above 800px wide is "Desktop" -- you basically have one separate CSS file for each type of screen... With that, you can modify your "regular" stylesheet to "look right" on a small screen without messing up your big-screen style version.

The only down-side is that modifications have to be made to each stylesheet, like if you wanted to add a new class or change a color or something... You have to update each file separately.

Hope this helped.

[llckll]

It's a different solution but I am only coding for a desktop version and not mobile. the right side should extend all the way to the right even on mobile devices. Can't find where to adjust my css.

[chryaner]

for some reason you got a property than break the structure of your site in the iphone (well i didnt look in other devices^^)

the property is height:100%; that exist in your #Footer_Container.

you have few ways to fix that:

1. setting it to auto;
2. delete it - didnt see any negative consequences - qa it ^^
3. target iphone :

@media only screen and (max-device-width: 480px) {
	  #Footer_Container { height:0; }	
}

good luck

[llckll]

I deleted it but on my iPad, it still gets cut off at the right... Any other ideas?

[chryaner]

ill love to help you but i dont have an ipad or mac, sry

[llckll]

Thanks chryaner, it's the thought that counts!