positioning problem of paragraph text

Question

On the portfolio page the 2nd image (the number 2) overlaps the text from the first image when resizing the browser window to make it smaller, 
https://www.facebook.com/photo.php?fbid=10153191493666850&set=a.10150444757026850.362896.501636849&type=3&theater
any help much appreciated :)

Ben Carroll · Answer

sorry forgot the code!

Ben Carroll · Answer

@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(3n) {
clear: left;
}
p {
    width:100%;
}
/******************
PAGE: ABOUT
******************/
.profile-photo {
    float: left;
    margin: 0 5% 80px 0;
}
@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;
}
}

Ben Carroll · Answer

/******************
GENERAL
******************/
body {
        font-family:'Open Sans', sans-serif;
        margin: 0;
}
wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
h3 {
    margin: 0 0 1em 0;
    font-weight: 800;
}
/******************
HEADING
******************/
header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}
header {
border-bottom: 5px solid #599a68;
margin-botttom: 60px;
}   
ul {
    margin: 0 0 0 0;    
}
logo{
    text-align:center;
    margin: 0;
}
h1 {
        font-family:'Changa one', sans serif ;
        margin: 15px 0;
        font-size: 1.75em;
        font-weight: normal;
        line-height:0.8em;
}
h2 {
        font-size: 0.75em;  
        margin: 0.5px 0 0;
        font-weight:normal;
}
img {
    width:100%;
}
/******************
NAVIGATION
******************/
nav {
        text-align:center;
        padding: 10px 0;
        margin: 20px 0 0;
        list-style: none;
}
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;
}
gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/******************
PAGE:ABOUT
******************/
.profile-photo {
        display:block;
        max-width: 150px;
        margin: 0 auto 30;
        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('phone.png');
}
.contact-info li.mail a {
background-image: url('mail.png');
}
.contact-info li.twitter a {
background-image: url('twitter.png');
}
/******************
COLOURS
******************/
/*site body */
body {
    background-color: #fff;
    color:#999;
}
/* Green header */
header { 
        background:#6ab47b;
        border-color:#599a68;
}
/* nav background on mobile */
nav {       background:#599468;
}       
/* logo text*/
h1, h2 {
        color:#ffffff;
    }
/*links */
a {     
        color:#6ab47b;  
}
/* nav link */
nav a, nav a:visited{
    color:#ffffff;
}
/*selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}

Nurul Ahsan · Answer

I think you should enlarge the image width.

jag · Answer

Providing the code will help a lot. From the looks of it the word is too big for the area and will go out of it's element. 
Possible Solutions:
Make text smaller
Change text
Overflow set to hide
Make element bigger when browser width is small

Welcome to the Treehouse Community

Looking to learn something new?

Ben Carroll

Ben Carroll

positioning problem of paragraph text

5 Answers

jag

jag

Nurul Ahsan

Nurul Ahsan

Ben Carroll

Ben Carroll

wrapper {

logo{

gallery {

gallery li {

gallery li a p {

Ben Carroll

Ben Carroll

primary {

secondary {

gallery li {

gallery li:nth-child(3n) {

logo {

Ben Carroll

Ben Carroll