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
Dungaamaa Tudevdorj
8,815 PointsCenter 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
9,767 PointsYou 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.
Brian Pirouet
Courses Plus Student 1,653 PointsBrian Pirouet
Courses Plus Student 1,653 PointsUpload your code what you have and we can have a look for you.
Dungaamaa Tudevdorj
8,815 PointsDungaamaa Tudevdorj
8,815 Pointshtml { 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 {
} .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 {
}
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 {
}
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; }
}
Dungaamaa Tudevdorj
8,815 PointsDungaamaa Tudevdorj
8,815 Points<!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">
</div>
Simple yet appealing web and graphic design </h1> </div> <p><a href="#portfolio" class="btn">Check out My Portfolio</a></p>
</div> <div class="onerow">
</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><!--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' });
});
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; }
</script> </body>