CODEWITHSUNDEEP
htmlcss
AlwaysStudent
AlwaysStudent

Reputation: 1374

Responsive design layout

I am trying to make my divs responsive. I have created divs with width:100%; and max-width: xx px; but it is not going to be a reponsive when resize browser. Anyone can help me here?

DEMO page.

.container {
  position:relative;
  width:100%;
  max-width:1010px;
  margin:0px auto;
  margin-top:50px;
  overflow:hidden;
}

.coverItem {
  float:left;
  width:100%;
  position:relative;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background-color:#1d1f20;
}

.coverItem:nth-child(1) {
  max-width:400px;
  padding-top:385px;
  margin-right:5px;
}

.coverItem:nth-child(2) {
  max-width:350px;
  padding-top:190px;
  margin-right:5px;
}
.coverItem:nth-child(3) {
  max-width:250px;
  padding-top:190px;
  margin-bottom:5px;
}
.coverItem:nth-child(4) {
  max-width:190px;
  padding-top:190px;
}
.coverItem:nth-child(5) {
  max-width:215px;
  padding-top:190px;
  margin-left:5px;
}
.coverItem:nth-child(6) {
  max-width:190px;
  padding-top:190px;
  margin-left:5px;
}
<div class="container">
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
</div>

Upvotes: 0

Views: 72

Answers (2)

kdyz
kdyz

Reputation: 1550

Using px won't resize your divs dynamically unlike how other units would.

Try using units that are relative. A sample of these responsive units are %s and viewport units (vw, vh, vmin, vmax).

DEMO PAGE

HTML

<div class="container">
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
</div>

CSS

.container {
  position:relative;
  width:100%;
  max-width:90%;
  margin:0px auto;
  margin-top:5%;
  overflow:hidden;
}

.coverItem {
  float:left;
  width:100%;
  position:relative;
  border-radius:5%;
  -webkit-border-radius:5%;
  -moz-border-radius:5%;
  background-color:#1d1f20;
}

.coverItem:nth-child(1) {
  max-width:36%;
  padding-top:35%;
  margin-right:0.5%;
}

.coverItem:nth-child(2) {
  max-width:32%;
  padding-top:17.2%;
  margin-right:0.5%;
}
.coverItem:nth-child(3) {
  max-width:22.7%;
  padding-top:17.2%;
  margin-bottom:0.5%;
}
.coverItem:nth-child(4) {
  max-width:17.2%;
  padding-top:17.2%;
}
.coverItem:nth-child(5) {
  max-width:19.6%;
  padding-top:17.2%;
  margin-left:0.5%;
}
.coverItem:nth-child(6) {
  max-width:17.2%;
  padding-top:17.2%;
  margin-left:0.5%;
}

Upvotes: 2

priya_singh
priya_singh

Reputation: 2488

Hey to make it responsive and width in %

.container {
position: relative;
width: 100%;
max-width: 1010px;
margin: 0px auto;
margin-top: 50px;
overflow: hidden;
}
.coverItem {
float: left;
width: 100%;
position: relative;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color: #1d1f20;
}

.coverItem:nth-child(1) {
max-width: 400px;
padding-top: 385px;
margin-right: 1%;
width: 39%;
}
.coverItem:nth-child(2) {
max-width: 350px;
padding-top: 190px;
margin-right: 1%;
width: 34%;
}
.coverItem:nth-child(3) {
max-width: 250px;
padding-top: 190px;
margin-bottom: 5px;
width: 25%;
}
.coverItem:nth-child(4) {
max-width: 200px;
padding-top: 190px;
width: 20%;
}
.coverItem:nth-child(5) {
max-width: 200px;
padding-top: 190px;
margin-left: 1%;
width: 19%;
}
.coverItem:nth-child(6) {
max-width: 200px;
padding-top: 190px;
margin-left: 1%;
width: 19%;
}
<div class="container">
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
  <div class="coverItem"></div>
</div>

Upvotes: 3

Related Questions