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

Posted by Edmon Quiocho
Edmon Quiocho
Courses Plus Student 1,408 Points

Text wrapping at the bottom of an image at breakpoint 480px.

Hi Guys,

Can you help me please? At break point 480px my text is wrapping at the bottom of the rounded image. How can i make it fix?

Thank you.

http://port-80-wzmfaatx7w.treehouse-app.com/

Chris Shaw
Chris Shaw
26,676 Points

Hi Edmon,

Could you please either post the code (HTML and CSS) you have or create something like a Pen as workspaces only work when they're open.

https://teamtreehouse.com/forum/posting-code-to-the-forum

3 Answers

Edmon Quiocho
PLUS
Edmon Quiocho
Courses Plus Student 1,408 Points
Edmon Quiocho
Edmon Quiocho
Courses Plus Student 1,408 Points

Hi Chris,

Thank you for your prompt response. Here's the code in my html and css.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Edmon Quiocho | Portfolio</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">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>

  </head>

  <body>

<!--
    <nav>
      <ul>
        <li><a href="index.html" class="selected">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
-->

    <section id="logo">
      <h1 class="edmon">Hi I'm Edmon Quiocho</h1>
      <h2 class="bummer">Bummer | Knowledge Freak | Monster</h2>
    </section>

      <div id="wrapperOne">
        <p class="meet">Meet my Friends</p>
      </div>


      <div id="wrapperTwo">   

        <dl id="description">
          <img src="img/kastoy.jpg" alt="Lion" class="grrr">
          <dt>Kastoy "Boy Qatar" Francisco</dt>
             <dd>Former member and the founder of Universal Motion Dancers in Philippines. He then left the group to train with Bruce Lee's group called "The Monkey Ninja's". The group said to be acquired by Osama Bin Laden in 1989 and was rumored to initiate the 9/11 attack in World Trade Center, USA. This guy is working now in Qatar as Ambassador of Camelius Adictus. </dd>
          <img src="img/eyoy.jpg" alt="Lion" class="meow">
          <dt>Eyoy "Mother Fucker" Ponciano</dt>
             <dd>Some say this guy disappeared 20000 BC together with the mighty dinosaurs, electric mosquitoes and giant fourteen-wheeler flying spiders. He left his land with bounty chickens and grass hoppers. He was last seen in the movie "Kinadenang Langgam" which won the Golden Buddha award as Best Worst Movie Ever.</dd>

          <img src="img/gerald.jpg" alt="Lion" class="meow">
          <dt>Gerald "The Drunken Master" Fojas</dt>
             <dd>A very rare mammal in the mountains of Urkabushkahubahur. Mostly awake at night digging food. In daytime, he only needs a bottle of Emperador to live. This mammal is endangered and hard to find.</dd>

        </dl> 

     </div>



    <div id="wrapperThree">
      <section id="secondSection">

        <h4>Let me take you a ride to Who I Am.</h4>

      </section> 
     </div>




    <footer>
      <a href="http://facebook.com" target="_blank"><img src="img/facebook-wrap.png" alt="facebook logo"></a>
      <a href="http://twitter.com" target="_blank"><img src="img/twitter-wrap.png" alt="twitter logo"></a>
      <p>&copy; Copyright 2015. Edmon Quiocho. All rights reserved.</p>
    </footer>


  </body>
</html>

body {
  margin: 0 auto;
  font-family: 'Nunito', sans-serif;
  background-color: #f6ffed;
}

img {
  max-width: 100%;
}

#wrapperOne {
  max-width: 200px;
  margin: 0 auto;
  background: #d3d9ea;
}

#wrapperTwo {
  padding-bottom: 50px;
}

/*******************************************
NAVIGATION
*******************************************/

nav ul {
  list-style: none;
  background-color: lightsteelblue;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  font-size: .75em;
  font-weight: bold;

}

nav ul li {
  display: inline-block;
  margin: 15px 5px;
  }

nav a {
  text-decoration: none;
  color: #fff;
  padding: 15px 15px;
}

/**Hover********************/

nav a.selected {
  color: goldenrod;
}

nav a:hover {
  color: lightgrey;
}

/*
.edmon:hover {
  color: #bcd6d2;
}

.bummer:hover {
  color: #c1ed90;
}
*/


/*******************************************
SECTION 1 - Hi Im Edmon Quiocho
*******************************************/

#logo {
  text-align: center;
  color: #fff;
  background-image: url('../img/stand_01.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 300px;
}

#logo h1 {
  margin: 0 auto;
  font-size: 1.75em;
}

.edmon {
  padding: 120px 0 0;
}

.bummer {
  font-size: .8em;
}


/*******************************************
Meet my friends
*******************************************/

.meet {
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  font-size: 2.25em;
  color: #6d6d6d;
  border-bottom: 8px solid #000;
 }

dl img {
  display: block;
  margin: 60px auto;
  width: 180px;
  height: 180px;
  border-radius: 100%;
}

dt {
  text-align: center;
  font-size: 1.25em;
  color: goldenrod;
  margin: 0 auto;
  padding: 30px 0 0;
}

dd {
  color: #7f7f7f;
  margin: 0 auto;
  padding: 15px 10px;
  text-align: center;
}


/*******************************************
SECTION 2
*******************************************/

#wrapperThree {
  max-width: 100%;
  height: 400px;
  background-image: url('../img/scooter.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  padding-top: 100px;
}

#secondSection h4 {
  font-size: 1em;
  color: #fff;
  position: absolute;
  padding-left: 200px;

}

/*******************************************
FOOTER
*******************************************/

footer {
  text-align: center;
  margin: 0 0 40px 0;
  font-size: .65em;
  color: #7f7f7f;
}

footer img {
  padding-top: 70px;
  width: 30px;
  height: 30px;
  margin: 0 4px 0;


}
Edmon Quiocho
PLUS
Edmon Quiocho
Courses Plus Student 1,408 Points
Edmon Quiocho
Edmon Quiocho
Courses Plus Student 1,408 Points

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

/**************************** NAVIGATION ****************************/

/* nav ul { font-size: 1.25em; }

*/

/******************************* HEADER - Edmon Quiocho Bummer!!! *******************************/

logo {

height: 500px;

}

logo h1 {

margin: 0 auto; font-size: 2.75em; }

.edmon { padding: 140px 0 0; }

.bummer { font-size: 1.25em; }

/******************************************* Meet my friends *******************************************/

#wrapperOne { max-width: 700px; margin: 0 auto; background: ; }

.meet { margin: 0 auto; padding: 60px 10px; text-align: center; font-size: 3em; border-bottom: 8px solid #000; }

/**************************** Main Content - MY FRIENDS ****************************/

#wrapperTwo { max-width: 750px; margin: 0 auto; padding: 50px 0; /* background: lightsteelblue;*/ }

.grrr, .meow { margin: 0 auto; float: left; clear: both; padding: 30px; margin-right: }

dt { text-align: left; font-size: 1.25em; margin: 0 auto; padding: 50px 0 15px 0; }

dd {

text-align: left; margin-bottom: 100px; padding: 0 15px 10px 0; }

footer { clear: both; } }

Edmon Quiocho
PLUS
Edmon Quiocho
Courses Plus Student 1,408 Points
Edmon Quiocho
Edmon Quiocho
Courses Plus Student 1,408 Points

Please disregard this. I already figured it out.