Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Andreas Fischer
Andreas Fischer
8,256 Points

Real mobile site looks completely different than on testing sites

Hi there,

I made a website with a few pages. It's not perfect because it's my first one but it looks nice and does what I should do.

I made the site responsive and with every tool I checked it looks how I want it to look. Now I uploaded the site and accessed it with my smartphone (Galaxy SII) and it's completely messed up:

  • The text of the page hovers over the header
  • the elements of an accordion menu are not centered and get cut off on the right side
  • I have a blank space above my header
  • etc...

Is it because of my smartphone?

Here is how it looks when I test it on my computer, everything is fine:

And here it is when I access it directly via my smartphone:

I can post my HTML and CSS if needed

2 Answers

mrhummel
PLUS
mrhummel
Courses Plus Student 1,765 Points
mrhummel
mrhummel
Courses Plus Student 1,765 Points

It sounds like you zoomed in on the webpage. It would at least explain the cut off and overlapping text. So my first guess is, either the zoom of your mobile browser is not on 100% or you're using an uncommon browser?

And also did you define meta tags in the head of the html?

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Anyway, please post your code here that we can help you better.

Andreas Fischer
Andreas Fischer
8,256 Points

Hi mrhummel,

I didn't have "user-scalable=no" included. Unfortunately, it didn't work. The browser I use with my S2 is the standard browser, never changed that.

EDIT: My brother has the same problem but doesn't use a S2.

Here is my HTML code from the site I took the screenshots from:

          <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Natürlich. Schön. in Regensburg | Kosmetikstudio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <header>
      <nav>
      <div id="logobox">
          <a href="index.html"><img src="img/mama_logo.png" id="logox"></a>
        </div>

        <ul class="navigation">
          <li><a href="index.html" class="selected">ANGEBOT & PREISE</a></li>
          <li><a href="about.html">ÃœBER MICH</a></li>
          <li><a href="studio.html">DAS STUDIO</a></li>
          <li><a href="contact.html">KONTAKT</a></li>
        </ul>
      </nav>

      <div class="container">
          <div class="dummy">
              <div class="background"></div>
          </div>
      </div>


    </header>

    <div class="wrapper">

        <h1 class="intro">Angebot & Preise</h1>
        <p id="about">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. </p>

        <div class="desktop">
          <h2>Kosmetik</h2>
             <table class="indextable">
                <tr>
                  <td class="colA">Klassische Gesichtspflege</td>
                  <td>ca. 90 Minuten</td>
                  <td class="price">42 €</td>
                </tr>
                <tr>
                  <td>Reinigungsbehandlung</td>
                  <td>ca. 60 Minuten</td>
                  <td class="price">34 €</td>
                </tr>
                <tr>
                  <td>Regenerationsbehandlung mit Ampulle und Collagenvlies</td>
                  <td>ca. 90 Minuten</td>
                  <td class="price">49 €</td>
                </tr>
                <tr>
                  <td>Luxusbehandlung mit Mikrodermabrasion und Ultraschall</td>
                  <td>ca. 110 Minuten</td>
                  <td class="price">59 €</td>
                </tr>
                <tr>
                  <td>Ampulle / Serum</td>
                  <td></td>
                  <td class="price">6 €</td>
                </tr>
                <tr>
                  <td>Ultraschallanwendung</td>
                  <td>10 Minuten</td>
                  <td class="price">10 €</td>
                </tr>
              </table>



            <h2>Rund ums Auge</h2>
              <table class="indextable">
                <tr>
                  <td>Wimpern färben</td>
                  <td class="price">9 €</td>
                </tr>
                <tr>
                  <td>Augenbrauen färben</td>
                  <td class="price">6 €</td>
                </tr>
                <tr>
                  <td>Augenbrauenkorrektur</td>
                  <td class="price">6 €</td>
                </tr>
                <tr>
                  <td>Augenbrauenkorrektur und färben</td>
                  <td class="price">11 €</td>
                </tr>
                <tr>
                  <td>Wimperndauerwelle und färben</td>
                  <td class="price">32 €</td>
                </tr>
              </table>


              <h2>Enthaarung</h2>
              <table class="indextable">
                <tr>
                  <td>Gesichtshaare</td>
                  <td class="price">ab 5 €</td>
                </tr>
                <tr>
                  <td>Achseln</td>
                  <td class="price">13 €</td>
                </tr>
                <tr>
                  <td>Bikinizone</td>
                  <td class="price">15 €</td>
                </tr>
                <tr>
                  <td>Oberschenkel</td>
                  <td class="price">17 €</td>
                </tr>
                <tr>
                  <td>Unterschenkel inkl. Knie</td>
                  <td class="price">17 €</td>
                </tr>
              </table>

            <h2>Hand- und Fußpflege</h2>
              <table class="indextable">
                <tr>
                  <td>Maniküre</td>
                  <td class="price">19 €</td>
                </tr>
                <tr>
                  <td>Maniküre mit Lack</td>
                  <td class="price">22 €</td>
                </tr>
                <tr>
                  <td>Maniküre mit Politur</td>
                  <td class="price">24 €</td>
                </tr>
                <tr>
                  <td>Nagelverstärkung mit Gel</td>
                  <td class="price">39 €</td>
                </tr>
                <tr>
                  <td>Paraffinhandbad</td>
                  <td class="price">9 €</td>
                </tr>
                <tr>
                  <td>Medizinische Fußpflege</td>
                  <td class="price">22 €</td>
                </tr>
                <tr>
                  <td>Medizinische Fußpflege mit Lack</td>
                  <td class="price">25 €</td>
                </tr>
                <tr>
                  <td>French mit Gel</td>
                  <td class="price">15 €</td>
                </tr>
              </table>

              <h2>Massagen</h2>
              <table class="indextable">
                <tr>
                  <td class="colA">Aroma-Rückenmassage</td>
                  <td>ca. 25 Minuten</td>
                  <td class="price">22 €</td>
                </tr>
                <tr>
                  <td>Aroma-Ganzkörpermassagen</td>
                  <td>ca. 55 Minuten</td>
                  <td class="price">44 €</td>
                </tr>
                <tr>
                  <td>Hot Stone-Rückenmassage</td>
                  <td>ca. 25 Minuten</td>
                  <td class="price">29 €</td>
                </tr>
              </table>
              <p>Straffende Körperbehandlung auf Anfrage</p>

              <h2>Permanent Make-Up</h2>
              <table class="indextable">
                <tr>
                  <td>Lidstrich unten</td>
                  <td class="price">200 €</td>
                </tr>
                <tr>
                  <td>Lidstrich oben</td>
                  <td class="price">250 €</td>
                </tr>
                <tr>
                  <td>Wimpernkranzverdichtung</td>
                  <td class="price">350 €</td>
                </tr>
                <tr>
                  <td>Augenbrauen</td>
                  <td class="price">350 €</td>
                </tr>
                <tr>
                  <td>Lippenkontur</td>
                  <td class="price">400 €</td>
                </tr>
              </table>
              <p>Alle Preise inkl. einmal Nacharbeiten innerhalb von sechs Monaten</p>
    </div>

      <div class="mobile">
        <ul class="accordion">
          <li>
              <a href="#first" class="accordion-header">Kosmetik</a>
              <div class="accordion-content" id="first">
                <p>Klassische Gesichtspflege</p>
                <p>ca. 90 Minuten | 42 €</p>
                <hr>
                <p>Reinigungsbehandlung</p>
                <p>ca. 60 Minuten | 34 €</p>
                <hr>
                <p>Regenerationsbehandlung mit Ampulle und Collagenvlies</p>
                <p>ca. 90 Minuten | 49 €</p>
                <hr>
                <p>Luxusbehandlung mit Mikrodermabrasion und Ultraschall</p>
                <p>ca. 110 Minuten | 59 €</p>
                <hr>
                <p>Ampulle / Serum</p>
                <p> 10 €</p>
                <hr>
                <p>Ultraschallanwendung</p>
                <p> 10 Minuten |10 €</p>
              </div>
          </li>
          <li>
              <a href="#second" class="accordion-header">Rund ums Auge</a>
              <div class="accordion-content" id="second">
                <p>Wimpern färben</p>
                <p>9 €</p>
                <hr>
                <p>Augenbrauen färben</p>
                <p>6 €</p>
                <hr>
                <p>Augenbrauenkorrektur</p>
                <p>6 €</p>
                <hr>
                <p>Augenbrauenkorrektur und färben</p>
                <p>11 €</p>
                <hr>
                <p>Wimperndauerwelle und färben</p>
                <p>32 €</p>
              </div>
          </li>
          <li>
              <a href="#third" class="accordion-header">Enthaarung</a>
              <div class="accordion-content" id="third">
                <p>Gesichtshaare</p>
                <p>ab 5 €</p>
                <hr>
                <p>Achseln</p>
                <p>13 €</p>
                <hr>
                <p>Bikinizone</p>
                <p>15 €</p>
                <hr>
                <p>Oberschenkel</p>
                <p>17 €</p>
                <hr>
                <p>Unterschenkel inkl. Knie</p>
                <p>17 €</p>
              </div>
          </li>
          <li>
              <a href="#fourth" class="accordion-header">Hand- und Fußpflege</a>
              <div class="accordion-content" id="fourth">
                <p>Maniküre</p>
                <p>19 €</p>
                <hr>
                <p>Maniküre mit Lack</p>
                <p>22 €</p>
                <hr>
                <p>Maniküre mit Politur</p>
                <p>24 €</p>
                <hr>
                <p>Naturnagelverstärkung mit Gel</p>
                <p>39 €</p>
                <hr>
                <p>Paraffinhandbad</p>
                <p>9 €</p>
                <hr>
                <p>Medizinische Fußpflege</p>
                <p>22 €</p>
                <hr>
                <p>Medizinische Fußpflege mit Lack</p>
                <p>25 €</p>
                <hr>
                <p>French mit Gel</p>
                <p>15 €</p>
              </div>
          </li>
          <li>
              <a href="#fifth" class="accordion-header">Massagen</a>
              <div class="accordion-content" id="fifth">
                <p>Aroma-Rückenmassage</p>
                <p>ca. 25 Minuten | 22 €</p>
                <hr>
                <p>Aroma-Ganzkörpermassage</p>
                <p>ca. 55 Minuten | 44 €</p>
                <hr>
                <p>Hot Stone-Rückenmassage</p>
                <p>ca. 25 Minuten | 29 €</p>
                <hr>
                <p>Straffende Körperbehandlung auf Anfrage</p>
              </div>
          </li>
          <li>
              <a href="#sixth" class="accordion-header">Permanent Make-Up</a>
              <div class="accordion-content" id="sixth">
                <p>Lidstrich unten</p>
                <p>200 €</p>
                <hr>
                <p>Lidstrich oben</p>
                <p>250 €</p>
                <hr>
                <p>Wimpernkranzverdichtung</p>
                <p>350 €</p>
                <hr>
                <p>Augenbrauen</p>
                <p>350 €</p>
                <hr>
                <p>Lippenkontur</p>
                <p>400 €</p>
                <hr>
                <p>Alle Preise inkl. einmal Nacharbeiten innerhalb von sechs Monaten</p>
              </div>
          </li>
          </ul>
          </div>


      <footer>
        <a href="impressum.html">Impressum</a>
      </footer>
  </div>
  </body>

  </html>

And here the CSS:

/***************
GENERAL
***************/
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #D0F5A9;
}

html, body {
  height: 100%;
}

header {
  display: inline-block;
  width: 100%;
  height: 0;
}

.wrapper {
  padding: 0 3%;
}

a {
    text-decoration: none;
}

nav {
  height: 80px;
  width: 100%;
  text-align: center;
}

nav ul {
  display: inline-block;
  float: right;
  list-style: none;
  padding: 0 3% 0 0;
}

nav li {
  float: left;
}

nav a {
  font-weight: 400;
  padding: 10px 7px;
  line-height: 80px;
  font-size: 15px;
}

#logobox {
  text-align: left;
  height: 80px;
  line-height: 80px;
  float: left;
  padding-left: 3%;
  margin-right: 5px;
}

#logox {
  height: 40px;
  width: 224px;
  vertical-align: middle;
  }

  #logobox a {
    padding: 15px 0;
  }

.container {
    display: inline-block;
    position: relative;
    width: 100%;
}
.dummy {
    padding-top: 30%;
}
.background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../img/kosmetik.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/***************
INDEX.html
***************/

.desktop {
  display: table;
  margin-bottom: 20px;
  line-height: 1.5em;
  letter-spacing: 0.5px;
  width: 100%;
}

.desktop p {
  padding: 0 10px;
}

.indextable {
  text-align: left;
  width: 100%;
}

.indextable tr:nth-child(odd) {
  background-color: rgba(58, 169, 53, 0.1);
}

.indextable tr td {
  padding: 3px 10px;
}

.colA {
  width: 70%;
}

.desktop h2 {
  margin: 2em 0 1em;
}

.price {
  text-align: right;
  vertical-align: top;
  font-weight: bold;
}



/***************
ABOUT.html
***************/

#fischer-schmidl {
    float: left;
    max-width: 25%;
    max-height: 25%;
    margin: 10px 20px 20px 10px;
}

#about {
    padding-top: 10px;
}



/***************
CONTACT.html
***************/
.anschrift {
  display: inline-block;
  float: left;
  width: 45%;
  padding-left: 3%;
  line-height: 1.5em;
}

.opening {
  display: inline-block;
  width: 45%;
  float: right;
  line-height: 1.5em;
}

.map {
  display: inline-block;
  position: relative;
  margin-top: 3rem;
  width: 90%;
  height: 0px;
  padding-bottom: 50%;
}

.map iframe {
  position: absolute;
  left: 5%;
  top: 0px;
  width: 100%;
  height: 100%;
  border: none;
}

#table-opening {
  width: 100%;
}

.contact-info {
  display: block;
  list-style: none;
  padding: 0;
  margin: 2em 0;
  line-height: 1.5em;
  letter-spacing: 0.5px;
}

.contact-info li {
  display: inline-block;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  padding: 0 0 0 35px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone-outline.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}



/***************
FOOTER
***************/

footer {
  font-size: 0.75rem;
  text-align: center;
  clear: both;
  padding: 50px 0 20px;
  color: #ccc;
}


/***************
COLORS
***************/

/* site body */
body {
  background-color: #fff;
  color: #8C8C8C;
}

/* green header */
header {
  background: rgb(58, 169, 53);
  border-color: rgb(58, 169, 53);
}

/* nav background on mobile */
nav {
  background: rgb(58, 169, 53);
}

/* logo text */
h1, h2 {
  color: #ccc;
}

/* links */
a {
  color: rgb(58, 169, 53);
}

/* nav link */
nav a, nav a:visited {
  color: #32673f;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #fff;
}

And the responsive CSS:

/***************
FOR SMARTPHONES AND TABLETS
***************/

@media screen and (max-width: 768px) {

/***************
NAVIGATION
***************/
#logobox {
  height: 100%;
  float: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav a {
  line-height: 100%;
}

nav {
  height: auto;
}

.navigation {
  border-top: 1px solid #fff;
  display: inline-block;
  float: none;
  text-align: center;
  padding: 10px 0;
}

/***************
INDEX.html
***************/

.desktop {
  display: none;
}

h1 {
  clear: both;
}

h1,
h2 {
  text-align: center;
}

#about {
  text-align: center;
}

.mobile {
  margin-top: 40px;
  width: 100%;
}

.accordion {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.accordion-header {
  display: block;
  padding: 15px 20px;
  background: rgb(58, 169, 53);
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
  margin-bottom: 5px;
}

.accordion-content p {
  margin: 0 0 15px 0;
  text-align: center;
}

.accordion-content {
    padding: 0;
    height: 0;
    overflow: hidden;
  }

.accordion-content:target {
    height: auto;
    padding: 20px 20px 5px;
  }



/***************
CONTACT.html
***************/
h3 {
  margin-top: 2em;
}

.responsive-h1 {
  display: none;
}

.anschrift,
.opening {
  display: block;
  float: none;
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 1em 0;
}

.anschrift {
  border-bottom: 1px solid #999;
}

.opening p {
  text-align: left;
  padding: 0;
}

.contact-info a {
  line-height: 1.5em;
  margin: 0;
}
}



/***************
FOR SMARTPHONE
***************/
@media screen and (max-width: 480px) {
  nav li {
    width: 100%;
    padding: 5px 0;
    margin: 0;
  }

  nav li:last-child {
    padding-bottom: 0;
}

.container,
.dummy,
.background {
  display: none;
}
}


/***************
FOR DESKTOP
***************/

@media screen and (min-width: 769px) {
/***************
INDEX.html
***************/

.mobile {
  display: none;
}

.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 3%;
}



/***************
CONTACT.html
***************/

   a[href*="tel:"] {
       cursor: default;
       pointer-events: none;
       text-decoration: none;
       color: #999;
   }
}
Andreas Fischer
Andreas Fischer
8,256 Points
Andreas Fischer
Andreas Fischer
8,256 Points

Hi there,

just a quick update:

I installed Chrome, Firefox and Opera on my Galaxy S2 and everything works perfectly fine!

Now that I tested it on browserstack it doesn't work very well on iOS either. Don't know where I went wrong...

Maybe this helps anyone to help me with this problem.