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
Dan Whiting
12,661 PointsTrouble with centering h1 on mobile devices. Also, trouble centering copyright on mobile.
Ok, so I'm trying to update my friend's website for his business. It's extremely simple and I haven't received all of the images yet. Regardless, I'm new to media queries and am having trouble with them and centering everything on mobile devices, but specifically h1 and copyright in footer. This is the first time I've ever posted anything, so be gentle with my horrific, messy code. Here's my html code:
***<!DOCTYPE html> <html class="back"> <head><title>FDI Cabinetry</title> <link rel="stylesheet" href="css/style.css"> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Cinzel:900' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, intial-scale =1"> </head> <body> <section id="main-header"> <nav class="nav"> <ul> <li class="nav-item"><a href="contact.html">Contact</a></li> <li class="nav-item"><a href="inproduct.html">Inlaid Products</a></li> <li class="nav-item"><a href="solid.html">Solid Surfaces</a></li> <li class="nav-item"><a href="archmill.html">Architectural Millwork</a></li> <li class="nav-item"><a href="index.html">Commercial Casework</a></li> </ul> </nav> </section> <header class="main-header"> <span>Quality Commercial Millwork and Casework</span> <h1>FDi Cabinetry</h1> </header> <!-- 1. Link to jQuery (1.8 or later), --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->
<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama" data-nav="thumbs">
<img src="img/bartop.jpeg">
<img src="img/bartop2.jpeg">
<img src="img/bartop3.jpeg">
</div>
<p class="primary-content">FDI Cabinetry is an established commercial casework contractor conveniently located in Greater Cincinnati.
We have extensive experience in casework for hospital patient rooms, nurses stations, exam and treatment rooms, new and existing restaurant and bank work, schools, municipal buildings, store and retail cabinetry and fixtures.
Our team includes the finest installation experts as well, to ensure quality finished results.
</p>
<footer class="copyright-year"> Copyright ©<span id="copyright-year"></span> </footer>
<script type="text/javascript"> var today = new Date(); var year = today.getFullYear(); document.getElementById("copyright-year").innerHTML = year; </script> </body> </html> ***
here's my css:
- { box-sizing: border-box; }
body { color: #878787; margin: 0; font: 1em/1.5 'Montserrat', Arial, sans-serif; }
h1, h2{ font-family: 'Montserrat', Helvetica, Arial, sans-serif; }
h1 {
font-size: 5.625rem; /* 90px/16px */
font-weight: normal;
line-height: 1.3;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
margin: 12px 0 0;
font-family: 'Cinzel', serif;
}
h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ text-align: center; }
h3 { font-size: 1.00em; /* 20px/16px / color: grey; line-height: 1.2; margin-bottom: 1.7em; / 34px */ }
img { max-width: 100%; margin-bottom: 20px; border-radius: 10px; }
/* NAV BAR -------------------- */
ul { list-style-type: none; margin: 0; padding: 0px; letter-spacing: -0.02; overflow: hidden; background-color: #878787; position: fixed; width: 100%; border: 2px solid steelblue; z-index: 600; }
li { float: right; padding-top: 10px; padding-right: 10px; }
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 16px; height: 45px width: 60px; }
li a:hover { background-color: #ffa949; } /* Pseudo-classes ------------------ */
a:link { color: #ffa949; text-decoration: none; font-family: 'Montserrat', Arial, sans-serif; }
a:visited { color: white; }
a:hover{ color: white; background-clip: content-box; }
a:active { color: lightcoral; }
/* Main Styles --------------------- */
.main-header { padding-top: 170px; height: 300px;
color: steelblue; font-family: 'Cinzel', serif; padding-bottom: 400px; }
.primary-content, .main-header { text-align: center; }
.primary-content { padding-top: 25px; padding-bottom: 95px; }
.copyright-year{ margin: auto; width: 12%; padding: 10px; }
/* Layout Styles ------------------ */
.primary-content { width: 75%; padding-left: 50px; padding-right: 50px; margin: auto; max-width: 960px; font-family: 'Montserrat', sans-serif; } .contact-info{ list-style: none; padding: 0 50px; margin: auto; font-size: 0.9em; text-align: center; overflow: hidden; max-width: 960px; }
.contact-info a{ display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
ul.contact-info{ position: relative; border: none; background-color: transparent; width: 50%; }
ul.contact-info li{ float: none; }
ul.contact-info li a{ color: steelblue; }
.contact-info li.location a{ background-image: url('../img/location.png'); }
.contact-info li.phone a{ background-image: url('../img/phone.png'); }
.contact-info li.mail a{ background-image: url('../img/mail.png'); }
.contact-info li.twitter a{ background-image: url('../img/twitter.png'); }
/* Gallery Setting ------------------ */
.fotorama{
margin-left: auto;
margin-right: auto;
width: 35em;
}
/* Site img background ------------------ */ .back{ background: linear-gradient(#ffa949, transparent 70%), linear-gradient(1deg, #fff, transparent), #ffa949 url('../img/blueprint.jpeg') no-repeat center fixed; background-size: cover; }
/* Media Queries -------------------- */
@media (max-width: 1024px) { .primary-content{ width: 90%; }
/* Landscape phones and portrait tablets */ @media (max-width: 768px) { .primary-content{ width: 35em; padding: 20px; border: none; margin-left: auto; margin-right: auto; }
.main-header{
max-height: 380px;
padding: 50px 25px 0;
width: 100%;
}
.contact-info{
width: 35em;
padding: 20px;
border: none;
margin-left: auto;
margin-right: auto;
}
h1{
font-size: 3rem;
line-height: 1.1;
} }
@media screen and (max-width: 768px) and (min-width: 480px) {
.nav {
text-align: center;
margin-top: 10px;
}
.nav-item a {
padding:0 .69em;
display: inline;
}
.nav-item li{
float:none;
display: inline;
}
.contact-info{ width: 35em; padding: 20px; border: none; margin-left: auto; margin-right: auto; }
h1{
font-size: 3rem;
line-height: 1.1;
} } ***
Any help is appreciated as this is my first project for my portfolio! THANKS!
7 Answers
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 PointsThe footer has a width of 100%, so just center the text inside using text-align: center; on the class .copyright-info. The h1 seems centers to me.
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 PointsI had a hard time looking at the code. To center an h1, just use text-align: center;. To center a footer, wrap the footer either in a <div> tag or use the HTML5 <footer> tag.
Example:
@media (max-width: 1024px) {
h1 {
text-align: center; /* This will center text */
}
footer { /* Use either footer(I recommend) or div#footer - div with an id of footer */
margin: auto; /* This will center any div */
}
}
Any problems/questions comment below :)
Dan Whiting
12,661 PointsI had already tried both of those, but I think there may be something in my CSS that counteracts them both. I also don't know why it won't post my whole html code or why it breaks up my html code. Should I not have just copy and pasted it?
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 PointsYou can't just copy and paste your code. Take a look at the Markdown Cheatsheet below the textarea when you comment. Try adding !important. Example:
h1 {
text-align: center !important;
}
Also the h1 must be nested inside an element that is bigger than the h1's width. Could you please paste your code on JSFiddle? I'd like to help you further on this issue :)
Dan Whiting
12,661 Points
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 PointsError 404 - page not found. I think you have to create an account with JSFiddle and save the code in your account, then share the link in a comment.
Dan Whiting
12,661 Points
Dan Whiting
12,661 PointsIt looks correct when I resize the window; however, when I use dev tools and look at different mobile options (iphone 5, 6, galaxy etc.) it looks as if those elements are aligned to the right.
Jeremy Canela
Full Stack JavaScript Techdegree Graduate 30,766 PointsI just viewed the page on mobile options of the dev tools and the h1 looks centered.
Dan Whiting
12,661 PointsI wonder why it's not centered to me? Oh well, as long as you see it centered, then it's good. Thanks for all of your help, Jeremy!