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

Amanda Bater
Amanda Bater
7,686 Points

Personal 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
Amanda Bater
7,686 Points

It'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
Rune Andreas Nielsen
5,342 Points

Can you post a picture of what it looks like when, you view it on a small screen?

Rune Andreas Nielsen
Rune Andreas Nielsen
5,342 Points

Hi 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
Mark Pryce
8,804 Points

Target 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
Amanda Bater
7,686 Points

Have 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
Mark Pryce
8,804 Points

Without seeing your html it's hard to give a definitive answer.

Amanda Bater
Amanda Bater
7,686 Points

Ah, 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>&copy; 2016 lionel+lavender</p>
        </footer>
      </div>
    </body>
 </html>
Mark Pryce
Mark Pryce
8,804 Points

Thanks 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
Amanda Bater
7,686 Points

Thanks 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
Mark Pryce
8,804 Points

Not a problem, I like to tinker, without the occasional problem and the desire to rectify it we would never learn.