How do i get my paragraphs to be perfectly aligned, and responsive to different browser sizes?

Question

So i am brand new to html and CSS. I am currently taking the "how to build a website" track. And i am stuck. When my browser is the size of what it would be on a mobile platform, the paragraphs are perfectly aligned. However, when i expand the browser to a tablet size, and full screen the paragraphs loose there alignment.

My paragraphs look great in a mobile version but loose there alignment when the browser is expanded. I want my paragraphs to be fluid and responsive to different browser sizes and platforms. Sometimes i will get a sentence that wraps to another line when i don't want it to. Frustrating.

Heres the code from my responsive.css file:

@media screen and (min-width: 480px) {

/***************************************
Two Column layout
****************************************/
  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }

/***************************************
Page: Portfolio 
****************************************/

#gallery li{
  width: 28.3333%;
}

#gallery li:nth-child(4n) {
    clear: left;
  }

/***************************************
Page: About
****************************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px o;
}

}
@media screen and (min-width: 660px) {

}

Here's the html for the about page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lee Frampton|Marketing Consultant</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Lee Frampton</h1>
        <h2>Online Marketing Consultant</h2>
        </a>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html" class="selected">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
      </nav>
    </header>
    <div id="wrapper">
    <section id="about-text">
      <img src="img/self.jpg" alt="Photograph of Lee Frampton" class="profile-photo"> 
      <h3>About</h3>  
      <p>Hi, I'm Lee Frampton, and welcome to example.com. We specialize in online marketing services for small businesses.</p>
      <p>We do everything from designing, and devolping custom websites; to assisting businesses set up their content management systems via wordpress.</p>
      <p>We also offer SEO, and copywritting services. We'll help you intergrate social media platforms to your site, create lead pages, landing pages, and squeeze pages to help you meet your goals. Whether it be increasing sales, conversion rates or generating leads.</p><p>We'll help you launch new products and services with our custom designed advertisments, and social media campaigns.</p>
      <p> Follow us on twitter <a href="http://twitter.com/leesframpton">@leesframpton</a></p>
      </section>

      <footer>
        <a href="http://twitter.com/leesframpton"><img src="img/twitter-wrap.png" alt="Twitter logo" class"social-icon"></a>
        <a href="http://facebook.com/leeframpton"><img src="img/facebook-wrap.png" alt="Facebook logo" class"social-icon"></a>
      <p>&copy; 2015 Lee Frampton.</p>
      </footer>
      </div>
  </body>
</html>

and lastly heres the main.css code:

/***************************************
general
****************************************/

body { 
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/***************************************
Heading
****************************************/

header{ 
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align:center;
  margin: 0; 
}

h1 { 
  font-family:'changa One', sans-serif;
  margin: 15px 0;
  font-size-adjust: 1.75em;
  font-weight : normal;
  line-height: 0.8em;
}

h2 {
  Font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

h3{
  margin: 0 0 1em 0:
}



/***************************************
Navigation
****************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li{
  display: inline-block;
}

nav a{
  font-weight: 800;
  padding: 15px 10px;
}

/***************************************
footer
****************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon { 
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/***************************************
Page: Portfolio
****************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc37c;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  Font-size: 0.75em;
  color: #bdc37c;
}



/***************************************
Page: About
****************************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 20px;
}



/***************************************
Page: Contact
****************************************/

.contact-info {
  list-style-image: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.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;
}

.contact-info li.phone a{
  background-image: url('../img/phone.png');
}

 .contact-info li.mail a{
  background-image: url('../img/mail.png');
} 

.contact-info li.twitter a{
  background-image: url('../img/twitter.png');
}
/***************************************
colors
****************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header*/
header { 
  background:#6ab47b;
  border-color:#599a68
}

/* nav background on mobile*/
nav{
  background:#599a68;
}

/* logo text*/
h1, h2 {
  color:#fff;
}

/*links*/
a { 
  color: #6ab47b;
}

/* nav link*/
nav a, nav a:visited {
  color:#fff;
}

/* selected nav link*/
nav a.selected, nav a:hover {
  color:#32673f;
}

Answer 1 · 2015-09-25T09:22:39Z

September 25, 2015 9:22am

Hey Lee Frampton!

A little tip for future questions - not many people like to read lots of lots of code! :p If you're question is only regarding paragraphs, we only want to see paragraph related css and html :)

I think you need to explain a little more about what you're trying to do. Paragraph text will always wrap within its container; it's how paragraphs behave by default. What you can do is set a max-width on the parent container.

You can say:

.some-paragraph-container {
    width: 100%;
    max-width: 400px;
}

and the paragraph won't go any wider than 400px - try setting a width where the text looks just how you want it.

You can also justify the text as you would in a word document using the text-align property. Here are all the options you can play with:

text-align: left|right|center|justify|initial|inherit;

Also try playing with the length of the copy so it fits at every screen width - but it's a tough old job to make that kind of thing perfect! If it's something you're interested in pursuing, you'll need to explore media queries to work out exactly how you want that text to look at different screen widths.

Hope this helps!

Answer 2 · 2015-09-24T04:46:44Z

September 24, 2015 4:46am

Could you provide with the code and I will look at it. It sounds like we have to see through the media query attribute in CSS :)

Answer 3 · 2015-09-24T07:58:16Z

September 24, 2015 7:58am

media queries for responsive web design. Size for other screens, but phones will be 4k soon. Sigh... I'm still stuck at 1080p

just finish the web design or front end track. All your answers should be answered after the track. It's too early in your development career for that. Just learn the basics of html and css first. Then use media queries.

Welcome to the Treehouse Community

Looking to learn something new?

Lee Frampton

Lee Frampton

How do i get my paragraphs to be perfectly aligned, and responsive to different browser sizes?

3 Answers

thomascawthorn

thomascawthorn

Lee Frampton

Lee Frampton

Sajid Latif

Sajid Latif

Lee Frampton

Lee Frampton

gallery li{

gallery li:nth-child(4n) {

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

jason chan

jason chan

Lee Frampton

Lee Frampton