CODEWITHSUNDEEP
htmlcss
SimplySnap
SimplySnap

Reputation: 29

Div centered on desktop, not on mobile device

When centering a div within another, I succeed on desktop, I try in chrome's built in 'inspect' resolution change, but on 'mobile' the div stays at the bottom of the other div. Can anybody help, and see why the div is centered in the 'desktop mode', but not in the 'mobile mode'? Thank you

.headercontainer {
  overflow-y: hidden;
}

.header-title {
  width: 80%;
  height: 100px;
  left: 50%;
  top: 50%;
  font-size: 2em;
  z-index: -1;
  position: fixed;
  margin-left: -40%;
  margin-top: -50px;
  height: 100px;
  transform: translateY(-50%);
}

.header-title h1 {
  color: white;
  text-shadow: 2px 2px 4px #d1d1d1;
  font-family: 'Raleway', sans-serif;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
}

.header-image {
    background-image: url("images/Westminster.jpg");
    background-position: center center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5em;
    height:60vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position:relative;
    z-index: -3;
}
<div class = "headercontainer">
  <div class = "header-image">
    <div class = "header-title">
      <h1> Anarchists and Autocrats </h1>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1076

Answers (1)

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

You should use position:absolute instead of using position:fixed. Go through my JSFiddle Link or try below written code:

HTML Code -

<div class="headercontainer">
    <div class="header-image">
        <div class="header-title">
            <h1> Anarchists and Autocrats </h1>
        </div>
    </div>
</div>

CSS Code -

.headercontainer {
    overflow-y: hidden;
    position: relative;
}

.header-title {
    width: 80%;
    height: 100px;
    top: 50%;
    font-size: 2em;
    z-index: -1;
    position: absolute;
    height: 100px;
    transform: translateY(-50%);
}

.header-title h1 {
    color: #404040;
    text-shadow: 2px 2px 4px #d1d1d1;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    text-align: center;
}

.header-image {
    background: url("https://www.nyhabitat.com/blog/wp-content/uploads/2013/10/westminster-london-houses-parliament-big-ben-thames-river.jpg") center/ cover;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 5em;
    height: 60vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    z-index: -3;
}

Upvotes: 1

Related Questions