Below you will find a test example of what I try to accomplish.
It's a 'template', to use in different situations, a modal.
When used with small contents, it should be a small 'box' in the center of the screen.
When used with large contents (e.g. long texts), it should open in the top, and let you scroll to the bottom.
But, problem is: It's aligned to the center. With large contents, it only shows the mid part, and hides the top and bottom part out of screen.
It should be aligned like that, because the 'box' should be in the center of the screen, but I only don't want to have the contents cut off, at the top or at the bottom. It should open in the top, and let you scroll to the bottom, so you can see everything.
It looks like the content is 'cut off' in every 'justify-content' - setting.
The example below should start with "This is heading line 1" and end with a button (then everything is on the screen, or could be scrolled to, that's also ok).
UPDATE: I forgot to add the div block that contains my blurred background. See example below.
Below code also available on:
https://codepen.io/kworkspace/pen/ogYNqyo
.w-layout-blockcontainer {
margin-left: auto;
margin-right: auto;
display: block;
}
.site-intro-modal {
z-index: 999;
color: #2a5d07;
text-align: justify;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-size: 20px;
line-height: 30px;
display: flex;
position: fixed;
inset: 0%;
overflow: auto;
}
.modal-bg {
filter: blur(2px);
background-color: cornflowerblue;
background-position: 0 0, 0 0, 0 0;
background-size: auto, auto, cover;
width: 100%;
height: 100%;
}
.modal-container {
background-color: burlywood;
border-radius: 30px;
width: 100%;
max-width: 35rem;
padding: 1.8rem;
position: absolute;
overflow: auto;
}
.heading {
text-align: center;
margin-top: 1.25rem;
margin-bottom: 1.375rem;
font-size: 2.75rem;
line-height: 2.75rem;
}
.button {
color: #2a5d07;
background-color: aliceblue;
border-radius: 30px;
padding: .5625rem .9375rem;
font-size: 1.875rem;
line-height: 1.875rem;
position: static;
}
.container {
justify-content: center;
align-items: flex-start;
display: flex;
}
.paragraph-2 {
margin-bottom: 1.375rem;
font-size: 1.875rem;
line-height: 1.875rem;
}
@media screen and (max-width: 479px) {
.site-intro-modal {
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
justify-content: flex-start;
align-items: center;
}
}
.modal-container {
height: auto;
}
<div class="site-intro-modal">
<div class="modal-bg"><br></div>
<div class="modal-container">
<h1 class="heading">This is heading line 1</h1>
<h1 class="heading">This is heading line 2</h1>
<h1 class="heading">This is heading line 3</h1>
<p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
<p class="paragraph-2">This is a text to display on all types of screens, such as desktop, tablet, and mobile. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip. Lorem ipsum em big jatpoj hiotnk bioj ghiip lop rest ribum qetri gca bac riart nafrai opt gehip.</p>
<div class="w-layout-blockcontainer container w-container">
<a href="#" class="button w-button">Enter site</a>
</div>
</div>
</div>
![Extra white space after subslash embed code [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)