Search code examples
htmlcssmobile-website

How to get mobile page scaling correctly?

Everything scales fine on desktop. Almost everything scales fine on mobile as well, except the header intro. Even the navbar scales perfectly.

Any ideas?

Added viewport width=device-width and initial sacle to the head, didn't change anything.

Html

<header id="header">
  <div class="intro">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-0 intro-text">
            <h1>IRON LANDSCAPING</h1>
            <p>Bringing your home the best.</p>
            <a href="#about" class="btn btn-custom btn-lg page-scroll">More Info</a> </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- About Section -->

CSS

.intro {
    display: inline;
    width: 100%;
    padding: 0;
    background: url(../img/intro-bg.jpg) top center no-repeat;
    background-color: #808080;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

ScreenShot

screenshot

Solution

  • Try to lower font size of heading, it pushes other content. you have this in your css .intro h1 { font-size: 100px; } which causes your problem Add this line at the end of your css to make media query for screens width smaller than 800px.

    @media only screen and (max-width: 799px) {
  .intro h1 {
    font-size: 36px;
  }
}