CODEWITHSUNDEEP
cssipad
cracker
cracker

Reputation: 4906

Css issue in iPad

I have a Web site which is working very fine. But when i am trying to use in the ipad it's giving me the scroll to the Right hand side. The site is not live so i am not able to give you the URL

I have used width: 953px for the container and i don't have used any width for the Body part.

Workaround

<meta name="viewport" content="width=953px"/>

<meta name = "viewport" content = "user-scalable=no, width=device-width">

HTML

<div class="maincontainer">
    <div class="firstcontainer">
        <div class="h1-fonts">
            We understand your success
        </div>
        <div class="first-innertex">
            <p>Our planning consultancy is built around our people. We recruit, develop and retain the best professionals. We build strong relationships with our clients to with</p>
        </div>
        <div class="clear"></div>
        <input type="button" onclick="location = '/team'" class="buttonred button-fonts" value="Meet the team" />
    </div>
    <div class="secondcontainer">
        <img src='/media/1004/success_people.png' width="555px" height="368px" alt='Banner Alt text' />
    </div>
</div>

CSS

.firstcontainer {   
    width: 38%;
    top: 147px;
    margin-left: 25px;
    float: left;
}    

.secondcontainer {    
    float: right;
}

.maincontainer {
    border: 1px solid #E2DEDE;
    height: 368px;
    margin-bottom: 20px;
    width: 100%;
}

.button-red {
    font-size: 16.18px;
    font-family: "OpenSans";
    color: rgb(255, 255, 255);
    border-width: 1px;
    border-color: rgb(229, 229, 229);
    border-style: solid;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    height: 45px;
    z-index: 97;
    padding-right: 40px;
    cursor: pointer;
    margin-left: 0px;
    background-color: rgb(182, 39, 29);
    background-position: 90% 50%;
}

I have tried to put both of the thing but it's still not working.

Note: I don't want to change my css

If anyone can suggest me for this.

Upvotes: 0

Views: 48

Answers (4)

cracker
cracker

Reputation: 4906

I have change meta tag and it's worked nicely.

<meta name="viewport" content="width=device-width; initial-scale=0.8; maximum-scale=1.5;" />

I have change initial-scale to 0.8 from 1.0. So It's reducing the zoom in the iPad and my site working very well without using any css

Upvotes: 1

Der Vampyr
Der Vampyr

Reputation: 951

The width of an ipad is 768px.

So you need to use <meta name="viewport" content="width=768px"/>

And if you want a proper alignment you should give the img an %-width like this:

.secondcontainer {    
  float: right;
  width: 55%;
}

.secondcontainer img {    
  width: 100%;
}

Upvotes: 0

andre de waard
andre de waard

Reputation: 164

Try working with % on mobile devices

Upvotes: 0

Pianoc
Pianoc

Reputation: 807

It is very tricky to answer without the code, but the width of an iPad is 768px in portrait view, using 953px for your container will make it wider than the device size and therefore you will get the scroll.

Upvotes: 0

Related Questions