CODEWITHSUNDEEP
htmlcss
A.Razavi
A.Razavi

Reputation: 509

how to adjust column size when page width changes in css?

In my example below, when page width is > 300px, the two columns span the entire width of the page, however, when the page size decreases below the 300px, the one column can't fill the entire page. How to change that so that one column fits entire page?

html {
box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.cols {
  width:50%;
  min-width:300px;
  float:left;
  background-color: yellow;
  padding: 10px 10px 10px 10px;
  border: 2px solid black;
}
<div class="cols">
</div>

<div class="cols">
</div>

Upvotes: 0

Views: 421

Answers (1)

Roy Bogado
Roy Bogado

Reputation: 4452

You can change css with @media (max-width: 620px).
Look my example.
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@media

html {
box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.cols {
  width:50%;
  min-width:300px;
  float:left;
  background-color: yellow;
  padding: 10px 10px 10px 10px;
  border: 2px solid black;
}

@media (max-width: 620px) {
.cols {
  width:100%;
  min-width:100%;
}
}
<div class="cols">
</div>

<div class="cols">
</div>

Upvotes: 1

Related Questions