www.webdeveloper.com
Results 1 to 7 of 7

Thread: Right side getting cut off on mobile devices

  1. #1
    Join Date
    Jul 2008
    Posts
    93

    Right side getting cut off on mobile devices

    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.

  2. #2
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    265

    Cool Media Queries

    Media Queries might help...

    For example, I use this for one of my websites:
    HTML Code:
    <!-- 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.

  3. #3
    Join Date
    Jul 2008
    Posts
    93
    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.

  4. #4
    Join Date
    Mar 2012
    Posts
    48
    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 :
    Code:
    @media only screen and (max-device-width: 480px) {
    	  #Footer_Container { height:0; }	
    }
    good luck

  5. #5
    Join Date
    Jul 2008
    Posts
    93
    I deleted it but on my iPad, it still gets cut off at the right... Any other ideas?

  6. #6
    Join Date
    Mar 2012
    Posts
    48
    ill love to help you but i dont have an ipad or mac, sry

  7. #7
    Join Date
    Jul 2008
    Posts
    93
    Thanks chryaner, it's the thought that counts!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles