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!

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 Furquan Ahmad
Furquan Ahmad
5,148 Points

Responsive.css

On my browser when i change the dimensions the mobile view works. But on a iphone 4, HTC One, Galaxy S4. Mobile view doesn't seem to work, the desktop view loads. My website i made www.ultrabeauty.co.uk/ . Followed the tutorial how to make a simple website. Also my favicon doesn't load ? 

@media screen and (min-width: 480px) {

  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }



  /**********************************
  PAGE: PORTFOLIO
  ***********************************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

  /**********************************
  PAGE: ABOUT
  ***********************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

@media screen and (min-width: 660px) {

  /**********************************
  HEADER
  ***********************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #f386e8;
    margin-bottom: 60px;
  }


}

5 Answers

Phillip Gibson
Phillip Gibson
13,805 Points
Phillip Gibson
Phillip Gibson
13,805 Points

You need to add a meta tag to your HTML header, like so:

<meta name="viewport" content="width=device-width, user-scalable=no">

This will make it so the viewport width will match the device's screen width, rather than zooming out to view the whole page.

Furquan Ahmad
Furquan Ahmad
5,148 Points
Furquan Ahmad
Furquan Ahmad
5,148 Points

does the favicon load on your browser ? 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ultra Beauty Home Page</title>
    <meta name="description" content="Ultra Beauty offers the world renowned CACI Facials at the cheapest price in Essex. CACI facial toning techniques and systems are used world wide. They are the leading supplier of microcurrent non surgical face lift systems." />
    <link rel="shortcut icon" href="/img/favicon.ico" />
    <link rel="stylesheet" href="/css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Flamenco:300,400' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="/css/name.css">
    <link rel="stylesheet" href="css/responsive.css">



  </head>
  <body>
    <header>
    <div itemscope itemtype="http://schema.org/BeautySalon">
      <a href="/index.html" id="logo">
        <h1 itemprop="name">Ultra Beauty</h1>
        <h2>CACI Facials</h2>
      </a>
     <nav>
        <ul>
          <li><a href="/index.html" >Home</a></li>
          <li><a href="/about.html" >About</a></li>
          <li><a href="/contact.html" >Contact</a></li>
        </ul>
      </nav>
    </header>
        <div id="wrapper">
        <section>
          <ul id="gallery">
            <li>
              <a href="https://drive.google.com/file/d/0B3V6nJRMX035WkxmYk51OUJWV1k/edit?usp=sharing">
                <img src="img/brochure.jpg" alt="">

                <p>Click To View Our Brochure</p>
              </a>
            </li>
            <li>
              <a href="http://www.cnd.com/">
                <img src="/img/makeup.jpg" alt="">
                <p>We Also Offer CND Shellac Nails</p>
              </a>
            </li>
            <li>
              <a href="http://www.caci-international.co.uk">
                <img src="/img/caci4.jpg" alt="">
                <p>Visible Results Without Surgery</p>
              </a>
            </li>
            <li>
              <a href="/img/facial.jpg">
                <img src="/img/facial.jpg" alt="">
                <p>Refreshing facials</p>
              </a>
            </li>
            <li>
              <a href="/img/cacis.jpg">
                <img src="/img/cacis.jpg" alt="">
                <p>The cheapest in Essex</p>
              </a>
            </li>


          </ul>
        </section>
        <footer>

          <a href="https://www.facebook.com/caciultrabeauty"> <img src="/img/facebook-wrap.png" alt ="facebook profile" class="social-icon"></a>
           <a href="https://plus.google.com/u/0/b/100075253733891769755/+UltrabeautyCoUk/posts"> <img src="/img/google-wrap.png" alt ="facebook profile" class="social-icon"></a>
          <a href="https://twitter.com/caciultrabeauty"><img src="/img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

          <p>&copy; 2014 Ultra Beauty</p>



          <div id="texter" itemscope itemtype="http://schema.org/Product">
   <span itemprop="name">Ultra Beauty</span>
   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
     Rated <span itemprop="ratingValue">5.0</span>/5 based on <span itemprop="reviewCount">84</span> reviews
</div>


   </div>

        </footer>
         </div>
  </body>
</html>
Phillip Gibson
Phillip Gibson
13,805 Points

It does not. Looking at your HTML, you have the rel set to "Shortcut Icon", however, look at the article for link tags at w3schools doesn't have that as a valid option. Perhaps try changing it to rel="icon".

Furquan Ahmad
Furquan Ahmad
5,148 Points
Furquan Ahmad
Furquan Ahmad
5,148 Points

Hi adding 

<meta name="viewport" content="width=device-width, user-scalable=no">

doesn't work

Phillip Gibson
Phillip Gibson
13,805 Points

Looking at the code on your site, you set content="width=device-width, initial-scale=1" as opposed to content="width=device-width, user-scalable=no".

Phillip Gibson
Phillip Gibson
13,805 Points

I just tried the site on my phone though, and it seemed to work correctly.

Furquan Ahmad
Furquan Ahmad
5,148 Points
Furquan Ahmad
Furquan Ahmad
5,148 Points

Hi Phillip i figured out what i done wrong. I had to and the code to in the head tags of all my html files. Thanks. Does the favicon work as i put it in the root of my website so you should be able to go www.ultrabeauty.co.uk/favicon.ico so it should load, right ?

Phillip Gibson
Phillip Gibson
13,805 Points

Try replacing '''html <link rel="shortcut icon" href="/img/favicon.ico" /> ''' with '''html <link type="image/x-icon" rel="icon" href="/img/favicon.ico"> '''

Phillip Gibson
Phillip Gibson
13,805 Points

Disregard the above comment. I can't seem to edit it.

Try replacing

<link rel="shortcut icon" href="/img/favicon.ico" />

with

<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
Phillip Gibson
Phillip Gibson
13,805 Points

However, trying access either http://www.ultrabeauty.co.uk/favicon.ico or http://www.ultrabeauty.co.uk/img/favicon.ico doesn't render any image. So perhaps there is something else wrong.

Furquan Ahmad
Furquan Ahmad
5,148 Points
Furquan Ahmad
Furquan Ahmad
5,148 Points

all sorted. how do i boost me SEO ?