Shutterbug Step 3 Bootstrap

How do I style

in the bootstrap grid via CSS? I was able to change the font-size utilizing “p style” in html but could not figure it out. Can someone please let me know where in the css code I should write the the style in for

? In this case the font size

-<!doctype html>

Sutton Strategic Results

Never Giving Up and Finding a Way Out

Download Shutterbugg
<!-- The first section div -->
<div class="section">
  <div class="container">
   <div class="row">
    <div class="col-md-6">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png"/> </div>
     <div class="col-md-6">
       <h1>The Future </h1>
       <p style= "font-size:24px"> Share your moments with the people who matter to you most. With Shutterbugg, it's easy to share with the right people. </p>
     
     </div>
    </div>
  </div>
</div>

<!-- The second section div -->
<div class="section">
  <div class="container">

  </div>
</div>

<!-- The third section div -->
<div class="section">
  <div class="container">

  </div>
</div>


<div class="store section container">
  <h2>Available for iPhone, iPad, and Android.</h2>
  <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
  <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
</div>

<!-- The footer div -->
<div class="footer">
  <div class="container">
    
  </div>
</div>

CSS

/*View the result by visiting http://localhost:8000 in the browser. */

.container {
max-width: 928px;
}

h1, h2, p, a {
font-family: ‘Helvetica Neue Thin’, ‘HelveticaNeue-Thin’, ‘helvetica neue’, helvetica, arial, ‘lucida grande’, sans-serif;
}

.download {
background-color: rgba(238,68,95,0.9);
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
}

h1 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px;
}

a {
font-size:18px;
font-weight: 200;
}

.main {
height: 550px;
padding-top: 55px;
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
background-size:cover;

}

.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}

.section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}

.store {
text-align: center;
border-bottom: 0px;
padding-bottom:100px
}

.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}

.footer ul {
list-style-type: none;
padding-left: 0;
}

.footer li {
color: #999;
font-weight: 600;
}

@media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
font-size: 34px;
}

.col-md-6 p {
font-size:100px;
}

.download {
background-color: red;
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}
/*View the result by visiting http://localhost:8000 in the browser. */

.container {
max-width: 928px;
}

h1, h2, p, a {
font-family: ‘Helvetica Neue Thin’, ‘HelveticaNeue-Thin’, ‘helvetica neue’, helvetica, arial, ‘lucida grande’, sans-serif;
}

.download {
background-color: rgba(238,68,95,0.9);
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
}

h1 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px;
}

a {
font-size:18px;
font-weight: 200;
}

.main {
height: 550px;
padding-top: 55px;
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
background-size:cover;

}

.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}

.section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}

.store {
text-align: center;
border-bottom: 0px;
padding-bottom:100px
}

.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}

.footer ul {
list-style-type: none;
padding-left: 0;
}

.footer li {
color: #999;
font-weight: 600;
}

@media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
font-size: 34px;
}

.col-md-6 p {
font-size:100px;
}

.download {
background-color: red;
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}

/*View the result by visiting http://localhost:8000 in the browser. */

.container {
max-width: 928px;
}

h1, h2, p, a {
font-family: ‘Helvetica Neue Thin’, ‘HelveticaNeue-Thin’, ‘helvetica neue’, helvetica, arial, ‘lucida grande’, sans-serif;
}

.download {
background-color: rgba(238,68,95,0.9);
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius:5px;
}

h1 {
font-size: 50px;
font-weight: 100;
margin-bottom: 20px;
}

a {
font-size:18px;
font-weight: 200;
}

.main {
height: 550px;
padding-top: 55px;
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg);
background-size:cover;

}

.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}

.section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}

.store {
text-align: center;
border-bottom: 0px;
padding-bottom:100px
}

.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}

.footer ul {
list-style-type: none;
padding-left: 0;
}

.footer li {
color: #999;
font-weight: 600;
}

@media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
font-size: 34px;
}

.col-md-6 p {
font-size:100px;
}

.download {
background-color: red;
border: 1px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
}

1 Like

Sorry but not fully understanding your question, but will try.

In bootstrap you have such code:

h1, h2, p, a {
font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}

If wont help, try to set there or in:

.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}
1 Like