CODEWITHSUNDEEP
htmlcssresponsive-design
deadendstreet
deadendstreet

Reputation: 111

Having issues making content responsive

I'm in the process of converting my layout to a responsive design. I've looked at some tutorials and made some adjustments. However, when I load the page on a cell phone, iPad, or even make my window smaller, the content runs on top of each other. I was under the impression that using % instead of pixels would fix this. Am I wrong? The link is below.

http://tinyurl.com/ab2fmwv

article {
width: 80%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
border: solid;
position: relative;
overflow: hidden;
clear: both;
}
#two_column_left {
width: 74%;
float: left;
background-color: #FFFFFF;
}

#two_column_right {
width: 25%;
float: right;
}
.three-col-row {
width: 100%;
float: left;
padding-top: 2%;

}

.col-1 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-2 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;

}
.col-3 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;

}
.pic-3-col {
width: 175px;
height: 100px;
}
p.title-3-col {
color: #222020;
font-size: 1.3em;
clear: both;
}
p.description-3-col {
width: 190px;
}

Upvotes: 1

Views: 201

Answers (2)

Seetpal singh
Seetpal singh

Reputation: 3847

you are using width in pixels for following classes

p.description-2-col style.css line no 439 solu. add it 'max-width 100%'

p.description-3-col style.css line no 406 solu. add it 'max-width 100%'

.pic-3-col     style.css line no 197    solu.   add it 'max-width 100%'  </br>

wrap images of same columns in .pic-3-col as the first column is done

and also according to resolution keep chanding their wirdth in percentage using media queries

Upvotes: 0

Ben
Ben

Reputation: 13645

although the columns size perfectly, it's contents do not. for example

.pic-3-col {
width: 175px;
height: 100px;
}

if you want a responsive fluid layout, there should not be values like this in the CSS.

Upvotes: 1

Related Questions