CODEWITHSUNDEEP
htmlcssmedia-queries
Shashank
Shashank

Reputation: 348

How to define height responsiveness using media query in CSS

I am building a responsive website using CSS media query (not using any frameworks like bootstrap, foundation, etc.). Well the website is working fine for the wide screen resolution , 1366*768, but when I open the webpage on a screen resolution like 1280*1024, theres so much space are left below the page. Also I've defined the height of each section as 100vh.

For Screen Resolution 1366*768

**For Screen Resolution 1366*768**

For Screen Resolution 1280*1024

**For Screen Resolution 1280*1024**

How to display the content to cover the whole height of the page in order to remove the blank spaces for screens that have a height greater than 768px?

Upvotes: 1

Views: 2637

Answers (3)

jmgutierrez
jmgutierrez

Reputation: 31

If you want to scale the content in a specific height you can use transform: scale(); and media queries with max-height:

First the HTML

<div class="wrapper">
        <div class="main">
            <h2>Hi my name is Shashank</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p>
        </div>
</div>

Then the CSS

html, body {
  background: #333;
  padding: 0px;
  margin: 0px;
  color: #222222;
  height: 100%;
  width:100%;
  display: table;
}
.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}
.main {
  -moz-border-radius: 6px / 6px;
  -webkit-border-radius: 6px 6px;
  border-radius: 6px / 6px;
  padding: 20px;
  background: #4694e8;
  width:300px;
  margin: auto;
  transition: 0.3s;
}
/* When height is 400 or less scale the content to 0.7 */
@media screen and (max-height: 400px) {  
  body {
    background: #444;
  }
  .main {
    -ms-transform: scale(0.7, 0.7);
    -webkit-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
  }
}
/* When height is 500 or more scale the content to 1.3 */
@media screen and (min-height: 500px) {  
  body {
    background: #222222;
  }
  .main {
    -ms-transform: scale(1.3, 1.3);
    -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
  }
}

I recomend also center the content with display:table in html and body tags and display: table-cell with vertical-align: middle in the wrapper div

Here is a demo: https://jsfiddle.net/da2ds0nj/2/

I hope this help you, and excuse me by my english.

Upvotes: 3

Tyler Sebastian
Tyler Sebastian

Reputation: 9458

The easiest solution would be to use a flexbox - you'll get good coverage, as well.

.container {
    display: flex;
    align-items: center;
}

with something like

<div class="container">
    <div><!-- content --></div>
</div>

edit: this is for centering the content vertically - I may have misunderstood what you were trying to accomplish.

If you want to have the content fill up the space vertically, you can try something like:

.container {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
}

and combine it with flex-basis on the children to define a base-line for children you want to be larger. A great resource for flex can be found here.

Upvotes: 2

Jesper
Jesper

Reputation: 2094

Can't you set the content to fill a percentage height instead of a set number, like this:

content {
height: 70%;
}

Upvotes: -1

Related Questions