SUPER FRUSTRATED by Font Size 6/16


#1

First off, I tried this in three different browsers (Mozilla, Internet Explorer, and Google Chrome) that are all updated, along with switching computers, and making sure my browser zoom in 100%. Still not working.

On exercise 6/16 on Font Size I, it is asking that I change the paragraph size to 20 px. I did so but I keep getting the message "Did you set the font size to 20 pixels?". I also wanted to add that just a few pages before this step, the check boxes kept saying I was doing everything correctly but my webpage reverted to an html format and the font family would not change when I changed the code (just stayed at Times New Roman). By this point I have added the fall back fonts and the links to the google fonts.

style.css

body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

h1 {
  color: #FFF;
  font-size: 32px;
  padding-top: 100px;
  text-align: left;
  width: 60%;
  font-family: Playfair Display, serif;
}

h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 100;
  font-size: 22px;
  line-height: 24px;
  padding-bottom: 30px;
  text-align: left;
  width: 70%;
  font-family: Roboto, sans-serif;
}

p {
	color: AliceBlue;
	font-family: Roboto, sans-serif;
	font-size: 20px;
	font-weight: 100;
	line-height: 1.7em;
	text-align: left;
	width: 100%;
}

.byline {
  color: rgba(255, 255, 255, 0.5);
  float: left;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 14px;
  padding-left: 10px;
  text-transform: uppercase;
}

.caption {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.65);
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
}

.content {
  padding: 40px;
}

.image {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg");
  background-size: cover;
  background-position: center;
  height: 300px;
}

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}

index.html code below

<!DOCTYPE html>
<html>
<head>
    <title>The Rise of Soccer in The US</title>
  <link  rel="stylesheet" type="text/css"  href="https://fonts.googleapis.com/css?family=Roboto:100">
  	<link href="https://fonts.googleapis.com/css?family=Playfair+Display" type="text/css" rel="stylesheet">
</head>
<body>
    
 <div class="content">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_writer-avatar.jpg" class="writer-img">
    <h3 class="byline">Article By: Jane Dover</h3>
    <h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>
    <h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>
    <p>When the first World Cup arrived in the US in the 90's everyone officially declared that soccer was it. Well it's taken it's time but we can definitely see the influence of soccer, especially women's soccer, across the US. This year, 3 million kids played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the MLS has surpassed the MLB and NFL in popularity.</p>
    <p>Part of this meteoric rise can be attributed to the impressively soaring ad dollars being pumped into the Women's World Cup games in 2014. The women's games generated $40 million for Fox, that's definitely not chump change. And those advertisers, like ATT, Coca Cola, Verizon, Nike, Visa, and other heavy hitters, are working to make sure they see those numbers grow year after year by investing in youth soccer facilities and promoting programs across the country. </p>
    <p>Now that big business is involved you can be assured you'll see a continued rise in popularity in soccer across the country for years to come. </p>
  </div>

  <div class="image">
    <p class="caption">The local semi- pro soccer team in Seattle, WA plays an international friendly</p>
  </div>

</body>
</html>

#3

So I figured out the problem but only through my own search on Google Fonts API (https://developers.google.com/fonts/docs/getting_started). In the tutorial it did not say I should add style information under each google font added in my index.html. So I had to add style information as seen in that link to make it work.

Can anyone tell me though if there was another way of going about my problem just from the info in the tutorial?


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.