CODEWITHSUNDEEP
htmlcssmobilecentercentering
Dingo
Dingo

Reputation: 94

Header centered on desktop, but not mobile?

I have a banner image with a header overlaying it. When viewed on desktop, the header is both vertically and horizontally aligned. However, using a mobile device makes it so that it is horizontally center, but not vertically. (I know it's best to use a style sheet, but for the time being, I have he CSS in-line. I'll fix it eventually. CSS/HTML: 

<div class="banner-b" style="position: relative; height: 300px; background: url(http://s6.postimg.org/j8n8hawrl/Flower.png) center no-repeat; background-size: cover; top: 0; left: 0; right: 0; bottom: 0;">
                <div class="overlay-b" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: url(http://s6.postimg.org/6sqink3fl/Flower_Blur.png) center no-repeat; background-size: cover; z-index: 0; opacity: 0;"></div>
                <div class="content-b" style="margin: 0px auto; z-index: 10; text-align: center; position: relative; top: 50%; transform: translateY(-50%); font-size: 50px;">
                    <hgroup style="margin: 0px auto; display: inline-block; vertical-align: middle; textalign: center; position: relative; top: 0%; left: 0%; color: #fff; border: 5px solid #fff; padding: 40px; background-color: rgba(0, 0, 0, .7); z-index: -100;">
                         <h1 style="margin: 0px auto; color: white;">Wolf Valley</h1>

                    </hgroup>
                </div>
            </div>

site: wolfvalley.freeforums.net Mobile

Upvotes: 0

Views: 2968

Answers (2)

Waqar
Waqar

Reputation: 426

This is not the complete answer i am providing to you. You will have to set viewport to view your page correctly in handheld devices.

e.g., <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head tag of html.

Also you will have to adjust css accordingly to the device you want to view your page by adding media query in css.

e.g., 

@media screen and (max-width: 400px) {
        h1 {
           text-align: center;
        }
      }

    @media screen and (min-width:450px){
        h1 {
            text-align: center;
        }

        h2 {
            text-align: left;
        }
    }

NOTE: This is just what i thought will look. You will have to alter the css according to the way you want to display things on different devices.

Upvotes: 1

kittykittybangbang
kittykittybangbang

Reputation: 2400

It's your browser: the css transform property needs a fix for Safari. Try:

 <div class="content-b" style="margin: 0px auto; z-index: 10; text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-tranform: translateY(-50%); -moz-transform: translateY(-50%); font-size: 50px;">

Upvotes: 1

Related Questions