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

CSS Enhancing Design with CSS Styling Text Line-height and letter-spacing

Posted by Anthony Narro
Anthony Narro
1,710 Points

Why is my text not align horizontally

Hey I was wondering cause I saw in the video that Anwar had his text align horizontally for the most part of his big text and mine in inspect on iphone X mode like him was but mine is completely vertical which I think looks ugly so idk how to fix that

Jason Larson
Jason Larson
8,355 Points

Without seeing your code, it is extremely difficult to answer this. Perhaps you could paste in what you have so far?

5 Answers

Jason Larson
Jason Larson
8,355 Points

The 'i' is missing from the font-family that you have declared, 'Abolition Regular', not from the word 'family'. As for the letter-spacing, at 4:34 in the video, he does set the value to 1rem, but then he displays the page and decides that 1rem is way too much spacing, so he changes it to 1px at 4:46. Additionally, if you continue to the next video, at 1:11, he edits the CSS to include definitions for the header and footer, but you can clearly see in the file that he has the title class definition set to letter-spacing: 1px

Jason Larson
Jason Larson
8,355 Points
Jason Larson
Jason Larson
8,355 Points

I think the issue boils down to a few typos in your CSS. I'll address the ones that are causing the issue you asked about, and then mention a couple of others that should be fixed. The misspelling of the font-family (it's missing the second 'i') is causing the h1 in your header to be too big:

h1, h2 {
font-family: 'Abolition Regular', Impact, Charcoal, sans-serif;
  font-weight:  normal;
  line-height: 1.1;
}

Change the letter-spacing in your title class from 1rem to 1px:

.title {
letter-spacing: 1px;
}

The padding around the header isn't vital, but does help:

header {
  background-color: cyan;
  padding: 10vh 1rem;
  margin: -1rem -1rem 1rem; 
}

This is not impacting your header, but you should fix the ending mark to be a semicolon:

h3 {
font-size: 1.25rem;
}

This one shouldn't affect anything, but you should fix it anyway ('sans-serif'):

body {
  color: #454959;
  font: 300 100%/1.5 'Work Sans', sans-serif;
  margin: 1rem;
}
Anthony Narro
Anthony Narro
1,710 Points
Anthony Narro
Anthony Narro
1,710 Points

Here is my CSS code.

/* Web Fonts ----------------------- */
@font-face {
font-family: 'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.woff') format('woff');
}


/* Base Styles --------------------- */
* {
  box-sizing: border-box;
}
html {
  font-size: 1.25em; /* 20px on most screens */  
}
body {
  color: #454959;
  font: 300 100%/1.5 'Work Sans' , sans-sherif;
    margin: 1rem;
}
h1, h2 {
font-family: 'Aboliton Regular', Impact, Charcoal, sans-serif;
  font-weight:  normal;
  line-height: 1.1;

}
h1 {
font-size: 4rem;
  text-shadow: 1px 2px 3px rgba(0,10,30,.5);
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.25rem'
}
img {
  width: 100%; /* responsive images */
}


/* Main Styles --------------------- */
header, footer {
text-align: center;
}
header {
background-color: cyan;
  margin: -1rem -1rem 1rem; 
}
.title {
letter-spacing: 1rem;
}
main {
hyphens: auto;
}

/* Media Queries ------------------- */

Thanks for your help.

Anthony Narro
Anthony Narro
1,710 Points
Anthony Narro
Anthony Narro
1,710 Points

Thank you for the response I just don't understand cause "family" only contain one i so what second i are you talking about And the other thing is that the px/rem/% is cause Im following the video of the instructor and I'm seen the same thing in my CSS and his so that's why I'm confused

Anthony Narro
Anthony Narro
1,710 Points
Anthony Narro
Anthony Narro
1,710 Points

OK I made the changes but my h1 on inspect iphone X mode looks like i block like their on top of each other instead of being next to each other