O
O
Oleg Mashko2015-02-20 22:17:43
css
Oleg Mashko, 2015-02-20 22:17:43

Responsive layout or interest problem, who can help?

Good evening, good people! For the 4th day, I have been struggling with the adaptation of the site as full-hd monitors. The problem is that my monitor has a resolution of 1440x900, and when it is converted to percentages, it collapses, the incomprehensible thing for me is how to correctly set the block as a percentage, because if I set it fixed, then the entire site does not adjust in height to a higher resolution, but when I set it to 100%, then the whole site collapses. Having climbed a bunch of sites, and having tried different methods, I still can’t do something sensible. The most annoying thing is that when you specify percentages for the width, everything is fine, but as soon as percentages for the height are used, problems immediately begin.
body{
width: 100%; /*1440px*/
height: 100%; /*5119px*/
float: left;
margin: 0 auto;
}
header{
position: relative;
width: 100% /*1440px*/
height: 15.60851728853292%; /*100vh; 799px*/
margin: 0 auto;
background-attachment: fixed;
float: left;
}
.parallax-window{
min-height:200px;
background: transparent;
}
I set the height as a percentage, but nothing happens - everything moves vertically upwards, so as a fallback I registered it in vh, but this does not solve the situation, since the block itself looks scary with such units of measurement (blocks are compressed). Guys help, please enlighten me how to do the layout in percentage terms, I'm already desperate, thanks in advance for your answer and attention.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey B., 2015-02-20
@Olbery

If I understand correctly, here is an example:

<div class="container">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</div>

.container {
  max-width: 1440px;
  width: 100%;
}

And remove the height, it is not indicated.

I
IceJOKER, 2015-02-20
@IceJOKER

learn.shayhowe.com/advanced-html-css/responsive-we...
blog.teamtreehouse.com/beginners-guide-to-responsi...
Why float the body?
The result of your code above is jsfiddle.net/905tuokx , nothing flies anywhere, the whole picture would be, and not just the tip of the iceberg

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question