/    Sign up×
Community /Pin to ProfileBookmark

Right side getting cut off on mobile devices

Copy linkTweet thisAlerts:
May 15.2012

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…

[url]www.arcolacovenant.org/redesign_index[/url]

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.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@amandaNHTMay 16.2012 — [B]Media Queries[/B] might help...

For example, I use this for one of my websites:
[code=html]
<!-- 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]-->[/code]

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. ?
Copy linkTweet thisAlerts:
@llckllauthorMay 17.2012 — 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.
Copy linkTweet thisAlerts:
@chryanerMay 17.2012 — 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 [b]height:100%;[/b] that exist in your [b] #Footer_Container[/b].

you have few ways to fix that:

  • 1. setting it to [b]auto;[/b]

  • 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; }
    }[/CODE]


    • good luck
    Copy linkTweet thisAlerts:
    @llckllauthorMay 17.2012 — I deleted it but on my iPad, it still gets cut off at the right... Any other ideas?
    Copy linkTweet thisAlerts:
    @chryanerMay 17.2012 — ill love to help you but i dont have an ipad or mac, sry
    Copy linkTweet thisAlerts:
    @llckllauthorMay 17.2012 — Thanks chryaner, it's the thought that counts!
    ×

    Success!

    Help @llckll spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...