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
Amanda Bater
7,686 PointsPersonal project - media queries!
Hi there...I'm currently learning html and css and have been building a design/illustration website for practice. It's a pretty simple site but where I'm really struggling is with the media queries!
I've gone about it a bit backwards and built the site with a large screen in mind and am now struggling to get it looking nice for smaller screens. Does anyone know how I can get my logo (h1 and span) to be central? Everything I've tried so far either only moves the h1 not the span, or has a knock on effect of moving the nav bar.
Also, when the screen gets to a certain width, the span text gets all squashed together so not readable. How can I fix this?
Also, this has been a real learning curve for me after only doing the tutotials so far, I'm aware that I've not done this in the most efficient way so any tips are welcomed! Sorry for long post, very grateful for any help!!
My main css:
/*******Base Styles*******/
* {
box-sizing:border-box;
}
/*******Element Borders*******/
/*
* {
border: 1px solid black;
}
*/
/*******Main Styles*******/
body {
color: #b2b2b2;
margin:0;
font: 1em/1.5 'Poiret One', Helvetica, Ariel, sans-serif;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*******Main Heading*******/
.main-header {
color: #808080;
line-height: 0;
padding-top: 170px;
height: 600px;
background: linear-gradient(0deg, #fff, transparent 60%), url('../img/cover1.jpg') no-repeat center;
background-size: cover;
}
h1 {
font-size: 4em;
font-family: 'Poiret One';
text-shadow: 0 1px 3px white;
}
span {
font-size: 1.5em;
font-family: 'Poiret One';
text-shadow: 0 1px 3px white;
}
#logo {
float:left;
text-align:left;
margin-left: 5%;
width: 45%;
padding-top: 240px;
}
#logo a, a:visited {
color: #808080;
}
/*******Navigation*******/
nav {
background: none;
float: right;
text-align:right;
margin-right: 5%;
font-family: 'Poiret One';
width 45%;
padding-top: 290px;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
padding: 0 15px 0 15px;
}
/*******Wrapper*******/
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
padding-top: 20px;
}
/*******Contact*******/
.contact-info {
list-style-type:none;
padding:0;
margin:0;
}
.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;
color: #808080;
}
.contact-info li.mail a {
background-image: url(../img/maillogo.png);
}
.contact-info li.twitter a {
background-image: url(../img/twitterlogo.png);
}
/*******About*******/
/*******Footer*******/
footer {
font-size:12px;
text-align:center;
clear: both;
padding-top:50px;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
My responsive css
@media only screen and (max-width: 768px) {
.main-header {
max-height: 380px;
padding-top: 75px;
}
nav {
float: none;
text-align: center;
padding-top: 320px;
}
#wrapper {
padding-top: 50px;
}
}
6 Answers
Amanda Bater
7,686 PointsIt's making the span appear centrally over the h1 element, but ideally I not only want the span to be central over the h1, but for the whole logo to be in the centre of the page. And the span text is still getting squashed...not sure what to do about this?
Rune Andreas Nielsen
5,354 PointsHi Amanda.
Answer to: "Does anyone know how I can get my logo (h1 and span) to be central?"
Have you tried setting the span to be a block element, and align text to center?
span {
display: block;
text-align: center;
}
Mark Pryce
8,804 PointsTarget the parent element holding your logo and span, center them both.
Use margin and padding on each span and logo element to separate them?
Sorry for the brief reply on mobile hope this might enlighten you.
Happy coding.
Amanda Bater
7,686 PointsHave tried both of these...so far I have now got the span and header to be central without any of the rest of the layout changing.
The only thing now is that the h1 and span stay at the top of the page instead of lower down where I want them. Have tried using margin and padding to no avail. Would the parent element be the one with the id "logo". This is what I have been targeting.
@media only screen and (max-width: 768px) {
.main-header {
max-height: 380px;
padding-top: 75px;
}
#logo {
text-align: center;
float: none;
}
span {
display: block;
text-align: center;
}
nav {
float: none;
text-align: center;
}
#wrapper {
padding-top: 50px;
}
}
Mark Pryce
8,804 PointsWithout seeing your html it's hard to give a definitive answer.
Amanda Bater
7,686 PointsAh, sorry about that! Here it is...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lionel+lavender | illustration and design</title>
<link rel="stylesheet" href="css/normalize.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 id="top" class="main-header">
<a href="index.html" id="logo">
<span class="title">illustration and design</span>
<h1>lionel+lavender</h1>
</a>
<nav>
<ul>
<li><a href="https://www.etsy.com/uk/shop/LionelAndLavender" target="_blank">shop</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>
</section>
<footer>
<a href="https://twitter.com/lionel_lavender" target="_blank"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://uk.pinterest.com/lionellavender" target="_blank"><img src="img/pinterest-wrap.png" alt="Pinterest Logo" class="social-icon"></a>
<p>© 2016 lionel+lavender</p>
</footer>
</div>
</body>
</html>
Mark Pryce
8,804 PointsThanks I'll have a tinker with it, might not be able to provide an answer until the weekend though as during the week I can only dedicate 2 hours to self study.
What I would suggest though is redesigning from the beginning #mobile_first as it is best practise and easier to scale up rather than down. It's most likely what I will do with your css anyways. I'll get back to you let me know if you sort it.
Edit: do you use chrome development tools? If not I suggest taking a peak at your page to see what could be causing the 'squishing'.
Happy coding.
Amanda Bater
7,686 PointsThanks so much for your help. Don't worry about it too much though, as it's only for practise and I've learnt why mobile first is definitely the way to go! In future will start out properly instead of trying to work backwards.
Mark Pryce
8,804 PointsNot a problem, I like to tinker, without the occasional problem and the desire to rectify it we would never learn.
Rune Andreas Nielsen
5,354 PointsRune Andreas Nielsen
5,354 PointsCan you post a picture of what it looks like when, you view it on a small screen?