CODEWITHSUNDEEP
iphonecsshtmlcenter
user1677820
user1677820

Reputation:

Centering divs in HTML and CSS but cut-off on mobile screens

I have been having some real issues with CSS!

I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.

I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?

    .pageContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        padding-left: 1.82%;
        padding-right: 1.82%;
        position:relative; }

    #LayoutDiv1 {
        clear: both;
        margin: auto;
        width: 100%;
        display: block;
        text-align:center;
        position: relative; }

    #Box {
        width: 487px;
        height: 181px;
        position: absolute;
        left: 50%;
        top: 236px; 
        margin-left: -244px;
        z-index:6; }

The html: 

    <body>
<div class="pageContainer">
    <div id="LayoutDiv1">
    <div id="Twitter">
    <a href="http://www.twitter.com/wekaptureit" target="new"><img     src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/></a>
    </div>

<div id="Facebook">
<a href="http://www.facebook.com/wekaptureit" target="new"><img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/></a>
</div>

<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>

    </div>
    </div>
    </body>

Upvotes: 2

Views: 5681

Answers (2)

Dawson
Dawson

Reputation: 7597

Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.

From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.

This simpler code takes care of the left-side-cutoff (here's a fiddle):

.pageContainer {
    margin:0 auto;
}

#LayoutDiv1 {
        margin: auto;
        text-align:center;
}

#Box {
    width: 487px;
    height: 181px;
    top: 236px; 
    margin:236px auto 0;
}

And like a prev poster mentioned, you could add a @media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):

@media only screen and (max-width: 767px) {
    #Box { background:url('imgs/mobile-hero.jpg'); }
}

Upvotes: 0

automaticAllDramatic
automaticAllDramatic

Reputation: 2063

The smarter way in 2012 to do this is to use Media Queries, some inspiration here

You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))

Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.

Upvotes: 2

Related Questions