last day (18 days later) » 

08:56
1
Q: Place div in golden ratio: Alternative to absolute position?

JonSnowI have build a page like in this sample below. You can also play around with it on codepen. The idea was, that the dark grey hero box is placed on the bottom of the viewport. So far so easy. BUT if the screen is too small in height (e.g. for a small laptop), so that the text would fill most (or e...

In short, would you want the hero div always at the bottom unless the screen height is less than a certain size in which it shouldn't be at the bottom?
That's exactly what I need to achieve. Or let's say: it's done. But the absolute position of the below content and footer is causing some headaches...
...that's why I would love to find another solution
I will explain my answer in a moment, can you just tell me if it produces your required outcome? View the code snippet in full screen and not full screen to see the differences.
Morning @koder613 ! Well yeah, this is pretty close to what I would like to achieve. When resizing the window the hero is not always placed on the bottom of the viewport (there sometimes are a few pixels offset) but in general that looks like a really promising idea! Have to check with a real data sample. What I don't understand: why is the height of the hero-container only 98vh ?
Sorry, you're absolutely correct, I should have set it to 100vh. I will edit my answer.
 
1 hour later…
10:12
Salut koder! Once again, thank you for the time taken to find a better solution for my problem.

Your sample looks good. But now I have tried to set up another sample with the elements like before. And as soon as I include the background image (with: position: fixed) the content dissapears. Any idea why this is happening? In the dev console I can see the content is there. Just not visible. No idea what I am overseing...

https://codepen.io/SchweizerSchoggi/pen/WNGKrJO
ah, just changed z-index from 1 to -1 and that problem is fixed
But still ... the position of the content is not always correct when resizing the browser window. At some point the content is right below the hero. To be seen in the given sample above
I am glad you fixed the issue, so are you happy with the alternative solution?
Let me check the codepen
I just looked at your codepen, when the height is small, the hero section overlays the content below it, do you want that to happen?
no
that should not happen
10:32
just added that line before you answered :-)

"But still ... the position of the content is not always correct when resizing the browser window. At some point the content is right below the hero. To be seen in the given sample above"

If this is somehow to be fixed the solution would be perfect!
Let me have a look later, if that's ok, I am just busy now.
10:54
Sure, no hurry! I will be off for my lunch break in a few minutes anyway
 
5 hours later…
15:46
I just had another look and did only one additional change to your code.
I have removed the line
align-self: flex-start;
for the smaller screens. Just left the padding-top in there.

Codepen is updated. For me it does look good (until the screen is down to around 230px height, but.... who has such a small screen??)

If you do see any problem with the new code I am happy to receive your note.
Meanwhile HAVE A GOOD WEEKEND and thanks again for your time!
You definitly had the right idea!

  last day (18 days later) »