8

I've made a simple under construction website which has an image and some text centred in the middle of the page like following:

HTML Code:

<body>
    <div id="container">
        <span id="wip">Under Construction</span>
        <img id="image" src="katte.jpg">
        <span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span>
    </div>
</body>

CSS Code:

body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    text-align: center;
}
#container {
    max-width: 1230px;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#image {
    width: 100%;
}
#text {
    font-size: 20px;
    padding: 0 15px;
    display: block;
}
#wip {
    font-size: 40px;
    padding: 0 15px;
    display: block;
}

Link: http://katteboxen.dk/

Everything is working good except when it comes to iPads. The content is showing like when for example the css rule transform: translate(-50%, -50%); wasn't applied for the container. What are the alternatives for fixing this issue? Any guidance or feedback is more than welcomed.

3
  • 1
    Care to share a screenshot? :)
    – Rvervuurt
    Oct 1, 2014 at 7:56
  • @Rvervuurt link :D
    – MariusNV
    Oct 1, 2014 at 8:01
  • 1
    Himanshu was faster (I was still trying it out). His solution works.
    – Rvervuurt
    Oct 1, 2014 at 8:09

2 Answers 2

6

You might need to try browser specific prefixes for transform property, so:

-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

should do the trick.

For reference have a look here

5

transform property are browser based property set -webkit-transform, -moz-transform, -o-transform .... ans so set it according to your i-pad browser i this it will solve the problem

or just use

margin-left:-50%;

margin-top:-50%;
1
  • 1
    I can confirm this works. jsfiddle.net/z2j0hmr5 (opened it on my iPad) Although you might want to do some repositioning.
    – Rvervuurt
    Oct 1, 2014 at 8:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.