Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Center my content on Iphone screen @media query

I uploaded my webpage, but its not completed. I have problem when I view my content on iphone. All the contents not centering. Specially about, info and footer divs.I used iOS simulator, but could not figure out how to center contents. If i need to upload media query code let me know.

1 Answer

Matt Campbell
Matt Campbell
9,767 Points

You probably do? There's no link to a site to see. Also, have you put the necessary meta tag in your header to scale the page properly. Without it, it'll just scale the page back down to try and mimic what it looks like on the desktop version.

I'm not by my computer at the moment with code on so can't tell it to you off hand but it's a simple google.

Upload your code what you have and we can have a look for you.

html { background: url(../images/body_bg.png) repeat; } body { font-family:'Impact, Charcoal', sans-serif; color:#3a3838; }

a { color:#f69321; text-decoration: none; }

h1 { font-family: 'Julius Sans One', sans-serif; font-size: 4em; text-align: center; line-height: 75px; text-transform: uppercase; padding: 6%;/15px;/ margin:0 4% ;/30px 20px;/ }

h2{ font-family: 'Julius Sans One', sans-serif; color:#00adec;

} h3{ text-align: center; font:bold 1.5625em 'Julius Sans One', sans-serif; color:#f69321; }

ul.nav { min-width: 50%; font-size: 1.25em; margin-top: 5%;/20px;/ list-style: none; float:right; }

ul.nav li { display: inline; float:left; margin-left:40px; }

ul.nav li a:hover { color:#f3d800; } .blue { background:#00adec; border-radius: 125px; opacity: 0.4; padding:45px 35px; } .red { background:#ff0303; border-radius: 125px; opacity: 0.4; padding:45px 25px; }

.orange { background:#3a3838; border-radius: 125px; opacity: 0.4; padding:45px 25px; }

about {

font-size: 18px;
text-indent: 15px;
margin:40px 25px;
width:48%;
line-height: 30px;

} .portrate { margin-left: 100px; } .btn { float:right; color:#3a3838; background:#00adec; padding:10px 15px; margin:20px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { color: #f3d800; }

.section { margin-left: 100px; margin-bottom: 40px; }

.section p { line-height: 1.3em; }

.web { background: url(../images/web_icon.png) top left no-repeat; height: 300px; }

.web h2 { color: #f69321; position:relative; top:50px; left:50px; padding-bottom: 40px; }

.print { background: url(../images/design_icon.png) top left no-repeat; height: 300px; }

.print h2 { color: #f69321; position:relative; top:50px; left:50px; padding-bottom: 40px; }

.photo { background: url(../images/photo_icon.png) top left no-repeat; height: 300px; }

.photo h2 { color: #f69321; position:relative; top:50px; left:50px; padding-bottom: 40px; }

portfolio {

/background-image: url(../images/portfolio_bg.png);/ padding:10px 0 25px 60px; margin:50px; border-top: 0.1em solid #3a3838;

}

.header { float:left; clear:left; margin-left: -60px; background:#3a3838; padding: 5px 30px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); }

/.imageRow { *zoom: 1; margin: 0 auto; }/

.imageRow .single { float: left; margin:20px; }

.imageRow .single a { float: left; display: block; background: rgba(255, 255, 255, 0.1); padding: 2px; line-height: 1em; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; margin-right: 30px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }

.imageRow .single a img { -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.3); }

.imageRow .single a:hover { background-color: #8ad459; }

.imageRow .single { float: left; margin-right: 25px; background: rgba(255, 255, 255, 0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.2s ease-out; -moz-transitioan: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } /* .imageRow .set:hover { background: #f79a30; }*/

.imageRow .single a { background: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-right: 0; }

.imageRow .single a:hover { background-color: #f79a30; -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); }

.imageRow .single.first a { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -ms-border-top-left-radius: 4px; -o-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }

.imageRow .single.last a { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -ms-border-top-right-radius: 4px; -o-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }

.webDesign { margin-bottom: 50px; }

.webDesign img { float:left; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); padding: 2px; line-height: 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); margin-right: 3.33%; }

.webDesign img:after { content: ""; display: table; clear: both;

}

.upsign p a{ float:right; color:#3a3838; background:#00adec; padding:5px 10px; margin:20px; border-radius: 25px; text-transform: uppercase; }

.upsign a:hover { color:#f3d800; }

footer {

height: 100%; margin-top: 50px; padding: 25px 0 0 0; border-top: 0.1em solid #3a3838; }

usefulwebsites ul {

list-style: none;
line-height: 30px;

}

usefulwebsites ul li a{

color:#3a3838;

}

sendmessage label {

float: left; clear: left; color:#3a3838; margin: 11px 50px 0 0; width: 50px; text-align: right; font-size: 1em;

}

input { width: 200px; height: 25px; padding: 5px 20px 0px 20px; margin: 0 0 50px 0; background: #3a3838; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 1px 0px #f69321;-webkit-box-shadow: 0px 1px 0px #f2f2f2; font-family: sans-serif; font-size: 16px; color: #fff; text-shadow: 0px -1px 0px #334f71; } textarea { width: 260px; height: 170px; padding: 12px 20px 0px 20px; margin: 0 0 20px 0; background: #3a3838; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0px 1px 0px #f69321;-webkit-box-shadow: 0px 1px 0px #f2f2f2; font-family: sans-serif; font-size: 1em; color: #fff;
text-shadow: 0px -1px 0px #000; }

.required {

} .btn-submit { float:right; color:#3a3838; background:#00adec; padding:20px 15px; border-radius: 25px; text-transform: uppercase; } .btn-submit :hover { color:#f3d800; }

sendmessage span.valid {

background-color: #f69321; }

sendmessage span.error {

background-color:#b0240f;
color: #faf3bc;

}

contact p{

line-height: 1.3em; }

contact p span{

font-weight: bold; } .emailme { color:#3a3838; } a:hover.emailme { text-decoration:underline; } .copyright { border-top: solid 1px #00adec; text-align: center; padding: 15px 0 15px 0; margin-top:15px; }

/Iphone ---/

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

body { width: 100%; }

container {

width: 100%; } .intro { width: 100%; }

h1 { font-size: 2.6em; line-height: 50px; text-transform: uppercase; } h2 { font-size: 2em; }

p { font-size: 1.5em; }

.logo { max-width: 100%; margin:0 auto; }

ul .nav { margin-bottom: 5px; }

.blue { width:100%; font-size: 2em; text-align: center; margin-bottom: 5px; margin-left: 45px; background:#00adec; border-radius: 125px; opacity: 0.4; padding:20px 50px; } .red { width:100%; font-size: 2em; text-align: center; margin-bottom: 5px; background:#ff0303; border-radius: 125px; opacity: 0.4; padding:20px 50px; }

.orange { width:100%; font-size: 2em; text-align: center; background:#3a3838; border-radius: 125px; opacity: 0.4; padding:20px 50px; }

about {

width:100%; text-align: justify; } .portrate { display: none; } .section { width: 100%; }

portfolio {

width: 100%; }

.photo { display: none; } .imageRow .single { float: left; margin:5px; }

.webDesign { max-width: 100%; }

.webDesign img { width: 100%; margin-bottom: 30px; } /.upsign { display: none; }/

footer {

min-width: 100%; }

usefulwebsites {

display: none; } }

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

usefulwebsites {

display: none; }

}

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>SunniiStudio, Web & Graphic design</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/onepcssgrid.css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script>

</head> <body> <div class="onepcssgrid-1200"> <div id="container">
<div id="header"> <div class="onerow"> <div class="col4">

      <img class="logo" src="images/logo.png" alt="SunniiStudio">
    </div>
    <div class="col8 last">
      <ul class="nav">
        <li class="blue"><a href="#about"><span>About</span></a></li>
        <li class="red"><a href="#portfolio"><span>Portfolio</span></a></li>
        <li class="orange"><a href="#contact"><span>Contact</span></a></li>
      </ul>

    </div>
  </div>

</div>

<div class="onerow">
  <div class="col12">
  <div id="intro">
    <h1>Plan, design, &amp; build<br>

Simple yet appealing web and graphic design </h1> </div> <p><a href="#portfolio" class="btn">Check out My Portfolio</a></p>

  </div>
</div>

<div class="onerow">
  <div id="about" class="col7">
      <h2>About Me</h2>
      <p>Hello, my name is Sunny.  I am freelance  graphic /web designer in Sacramento, CA. I specialize in responsive web design, HTML/CSS, Adobe Photoshop, Adobe Illustrator, and print design. I started off as a graphic artist, but with today&rsquo;s expanding web world I also decided to broaden my field. I am doing web design for more than three years now. Check out my <a href="#portfolio">Design Portfolio</a> and<a href="#contact"> contact me </a>for more info. I am happy to be hired and work on any project with full heart. </p>
  </div>
  <div class="col5 last">
    <img class="portrate" src="images/self_portrate.png" alt="Hello from SunniiStudio">
  </div>
</div>


  <div class="onerow">
    <div class="section">
      <div class="col4">

      <div class="web"> 
        <h2>Web</h2>
          <p>Design Website from Scratch<br>
          Resposive Web Sites <br>
          Mobile Sites/Applications<br>
          Redesign Web Pages <br>
          Work on Templates <br>
          Photoshop to HTML/CSS</p>
      </div>
    </div>

      <div class="col4">
        <div class="print">
          <h2>Print Design</h2>

          <p>Brochures<br> 
          Business Cards<br> 
          Logos <br>
          Invitations</p>
      </div>
    </div>

      <div class="col4 last">
        <div class="photo">
          <h2>Photo</h2>
          <p>Prepare photos for print<br> 
          Photo manipulation <br>
          Restore old Photos</p>
      </div>
    </div>
</div>

</div> <div class="onerow">

    <div id="portfolio">

        <h2 class="header">Portfolio</h2><br>
        <div class="col12">
        <h3>Graphic Design</h3>


        </div>
        <div class="col12">
               <div class="imageRow">
                <div class="set">
                  <div class="single first">
                    <a href="images/gallery/il4.png" class="lightbox[design]" title="Special occation Greeting Cards" ><img src="images/gallery/il4_s.jpg" alt="" /></a>
                  </div>
                  <div class="single">
                    <a href="images/gallery/invite1.png" class="lightbox[design]" title="Custom Wedding Invitations" ><img src="images/gallery/invite1_s.jpg" alt="Graphic Design" /></a>
                  </div>
                 <div class="single">
                    <a href="images/gallery/invite3.jpg" class="lightbox[design]" title="Event Announcement Cards" ><img src="images/gallery/invite3_s.jpg" alt="Graphic Design" /></a>
                  </div>
                  <div class="single">
                    <a href="images/gallery/photo1.jpg" class="lightbox[design]" title="Photo Restoration"><img src="images/gallery/photo1_s.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
                  </div>

              <div class="single">
                <a href="images/gallery/logo2.jpg" class="lightbox[design]" title="Logos/"><img src="images/gallery/logo2_s.jpg" alt="Graphic Design" /></a>
              </div>
              <div class="single">
                <a href="images/gallery/poster1.png" class="lightbox[design]" title="Posters" ><img src="images/gallery/poster1_s.jpg" alt="Graphic Design" /></a>
              </div>
              <div class="single">
                <a href="images/gallery/bc2.jpg" class="lightbox[design]" title="Business Cards" ><img src="images/gallery/bc2_s.jpg" alt="Graphic Design" /></a>
              </div>

              <div class="single last">
                <a href="images/gallery/poster4.png" class="lightbox[design]" title="Holiday Greetings/Customized Holiday Cards"><img src="images/gallery/poster4_s.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
              </div>
            </div>

              <div class="single first">
                <a href="images/gallery/poster6.jpg" class="lightbox[design]" title="Web Graphics/Webiners"><img src="images/gallery/poster6_s.jpg" alt="Graphic Design" /></a>
              </div>
              <div class="single">
                <a href="images/gallery/sliderimage3.png" class="lightbox[design]" title="Event Posters" ><img src="images/gallery/sliderimage3_s.jpg" alt="Graphic Design" /></a>
              </div>
              <div class="single">
                <a href="images/gallery/brochure1.jpg" class="lightbox[design]" title="Brochures/Newsletters" ><img src="images/gallery/brochure1_s.jpg" alt="Graphic Design" /></a>
              </div>

              <div class="single last">
                <a href="images/gallery/logo1.jpg" class="lightbox[design]" title="Logos"><img src="images/gallery/logo1_s.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
              </div>

              <div class="upsign">
                 <p><a href="#home">Move Up</a></p>
              </div>   
    </div>
    <div class="webDesign">
        <div class="onerow">
          <div class="col12">
            <h3>Web Design</h3>

          </div>

          <div class="col4">
             <a href="templates/sushi/index.html" title="Yum Sushi Template"><img src="images/gallery/web1.jpg" alt=""/></a>

           </div>
           <div class="col4">
             <a href="emu/index.html" title="Jenny, Portfolio Site"><img src="images/gallery/emu_page.jpg" alt=""/></a>

           </div>
          <div class="col4 last">
              <img src="images/gallery/sleek_green.jpg" alt="">
          </div> 
        </div>   
        <div class="upsign">
            <p><a href="#home">Move Up</a></p>
        </div>   
   </div>

</div>

</div> </div> <div class="onerow"> <div id="footer"> <div id="usefulwebsites" class="col4"> <h2>Inspirations</h2> <ul> <li><a href="">W3Schools</a></li> <li><a href="">DynamicDrive</a></li> <li><a href="">Deviant Art</a></li> <li><a href="">Treehouse</a></li> <li><a href="">Smashing Magazine</a></li> </ul> </div>

      <div class="col4">
        <div id="sendmessage" >
          <h2>Send Me Message</h2>
           <form action="contact.php" method="post">

              <label for="name">Name:</label>
              <input type="text" id="name" class="required" placeholder="Enter your full name" />

              <label for="email">Email:</label>
              <input type="email" id="email" class="required" placeholder="Enter your email address" />

              <label for="message">Message:</label>
              <textarea id="message" placeholder=""></textarea>
                          <table style="display:none;">
                            <tr>
                              <th>
                            <label  for="address">Address</label>
                            </th>
                            <td>
                            <input type="text" name="address" id="address">
                            <p>Humans (and frogs): please leave this field blank.</p>
                          </td>
                            </table>  
              <input class="btn-submit" type="submit" value="Send Message" />

          </form>
        </div>
      </div>

      <div  class="col4 last">
        <div id="contact">
          <h2>Contact Me</h2>
              <p><span>Phone Number:</span> 916-397-0588<br>
              <span>Email me:</span> <a class="emmailme" href="mailto:dungaaworld@yahoo.com">dungaaworld@sunnniistudio.com</a><br>

         <span>Follow me on:</span>

              <a href="http://facebook.com/sunniistudio" target="blank">Facebook </a><span>|</span>


               <a href="http://twitter.com/dungaa" target="blank">Twitter </a><span>|</span>


                <a href="http://google.com/SunniiStudio" target="blank">Google+</a></p>

        </div>
    </div>
  <div class="col12">
    <div class="copyright">
      <p>&copy; 2013 Sunniistudio.All Rights Reserved.</p>
    </div>
</div>

</div><!--end of footer--> </div><!-- end of onepcssgrid--> </div> </div> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery-ui-1.8.18.custom.min.js"></script> <script src="js/jquery.smooth-scroll.min.js"></script>

<script> //scroll smooth jQuery(document).ready(function($) { $('a').smoothScroll({ speed: 1000, easing: 'easeInOutCubic' });

  $('.showOlderChanges').on('click', function(e){
    $('.changelog .old').slideDown('slow');
    $(this).fadeOut();
    e.preventDefault();
  })

});

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-2196019-1']); _gaq.push(['_trackPageview']);

(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //validating forms var $submit = $(".submit input"); var $required = $(".required"); function containsBlanks(){ var blanks = $required.map(function(){ return $(this).val() == "";}); return $.inArray(true, blanks) != -1; }

  function isValidEmail(email){
    return email.indexOf("@") != -1;
  }

  function requiredFilledIn(){
    if(containsBlanks() || !isValidEmail($("#email").val())) 
      $submit.attr("disabled","disabled");
    else 
      $submit.removeAttr("disabled");
  }
  $("#email").keyup(function(){
    //Check for a valid email.
    if(isValidEmail($(this).val()))
     $(this).next().removeClass("error").addClass("valid");
    else 
     $(this).next().removeClass("valid").addClass("error");
  });

  requiredFilledIn();

</script> </body>