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

HTML

Posted by Jelena Jeremic
Jelena Jeremic
7,730 Points

Responsive website problem

I am finishing "How to make a website" course, and everything works just fine. However, when I try to resize the browser window from bigger to smaller, in About section, for example, text does not go under the image; it just keeps shrinking, so image and text remain side by side. I cannot find what I did wrong in HTML or CSS. Hope you can help me.

Maksym Tkach
Maksym Tkach
4,817 Points

resize browser window and text aswell?

Nathan Dalbec
Nathan Dalbec
17,111 Points

Could you post your HTML and CSS?

2 Answers

Nathan Dalbec
Nathan Dalbec
17,111 Points
Nathan Dalbec
Nathan Dalbec
17,111 Points

If you want to make the text fall under the image when under a certain size, the simplest way to do that is, in that @media query you have at the top of your responsive.css file add a declaration to set the p elements inside the section elements to block

@media screen and (min-width: 480px) {
    section p {
        display: block;
    }
}

By default, paragraph element's display property is 'inline', which means they will try to shove themselves in alongside whatever is beside it. When an element's display property is set to 'block' it will try to occupy it's own line.

Jelena Jeremic
Jelena Jeremic
7,730 Points
Jelena Jeremic
Jelena Jeremic
7,730 Points

Here is my code for ABOUT page:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nick Pettit | Designer</title> <link rel ="stylesheet" href ="css/normalize.css"> <link href ="https://fonts.googleapis.com/css?family=Roboto" rel ="stylesheet"> <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"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Nick Pettit</h1> <h2>Designer</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> <img src="img/nick.jpg" alt="Photo" class="profile-photo"> <h3>About</h3> <p>Hi! This is my my design portfolio, where I share all of my work</p> <p>If you'd like to follow me on Twitter, my user name is @nickrp</p> </section> </div> <footer> <img src="img/facebook-wrap.png" alt="Facebook logo"> <img src="img/twitter-wrap.png" alt="Twitter logo"> <p>© 2014 Nick Pettit.</p> </footer> </body> </html>

responsive.css:

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

}

/***************************************************** TWO COLUMN LAYOUT *****************************************************/

primary {

width: 50%; float: left; }

secondary {

width: 40%; float: right; }

/***************************************************** 3 * 5= 15% for margins, and 85% for images 85/3=28.33333333333 (don't round numbers) *****************************************************/

/***************************************************** PAGE:PORTFOLIO *****************************************************/

#gallery li { width: 28.3333%;
}

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

}

/***************************************************** PAGE:ABOUT *****************************************************/

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

} /* large tablests and normal sized desktop*/ @media screen and (min-width: 660px) {

}

/********************************** HEADER ***********************************/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

}

main.css

/********************************** GENERAL **********************************/

body { font-family:'Roboto', sans-serif;

}

wrapper {

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

a {

text-decoration: none; }

img {

max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/************************************* 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: 'Roboto', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height:: 0.8em;

}

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

}

/*************************************** 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; }

/************************************* PAGE: PORTFOLIO *************************************/

gallery {

margin: 0; padding: 0; list-style: none;

}

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

gallery li a p{

margin: 0; padding: 5%; font-size: 0.75; color:#bdc3c7;

}

/************************************ PAGE:ABOUT ************************************/

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;

}

/************************************* PAGE: CONTACT *************************************/ .contact-info { list-style: 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;

}