Как просматривать обернутый контент, когда он выходит из видового порта, когда просмотр установлен на определенный разме ⇐ Html

[Anonymous]

Я пытался сосредоточить свой контент, и мой способ сделать это было установить видополон на определенную высоту и сосредоточить весь контент внутри. Тем не менее, теперь я хочу иметь возможность обернуть свой Flexbox, чтобы каждое изображение было вверху другим чисто. Это, однако, вызвало проблему, которую мне нужно прокрутить вверх, чтобы увидеть изображения, потому что просмотр является определенной высотой. Есть ли какие-либо способы исправить этот или даже лучший способ сосредоточить весь мой контент, будучи как Flexbox, так и заголовок?

Код: Выделить всё

* {
box-sizing: border-box;
}

img {
max-width: 50%;
user-select: none;
}

.navbar {
display: flex;
position: fixed;
width: 100%;
top: 0px;
justify-content: space-between;
align-items: center;
background-color: #D9BCA9;
height: 54px;
}

.top-row ul {
display: flex;
margin: 0px;
padding: 0px;
}

.top-row li {
list-style: none;
}

.top-row li a {
text-decoration: none;
padding: 1rem;
display: block;
color: black;
}

.top-row li:hover {
background-color: #e6c6b1;
}

.toggle-button {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px
}

.toggle-button .bar {
height: 3px;
width: 100%;
background-color: black;
border-radius: 10px;
}

@media(max-width: 832px) {
.toggle-button {
display: flex;
}
.top-row {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.top-row ul {
width: 100%;
flex-direction: column;
}
.top-row li {
text-align: center;
}
.top-row li a {
padding: .5rem 1rem;
}
.top-row.active {
display: flex;
}
.logo {
margin-top: 9px;
margin-left: 4px;
}
}

.expand {
height: 235px;
}

.shrink {
height: 54px;
}

.logo {
padding-top: 5px;
margin-left: 4px;
max-width: 200px;
}

.disable-select {
user-select: none;
}

.html-js-css {
display: flex;
justify-content: center;
margin-top: 4rem
}

.about-us {
text-align: center;
margin-top: 3rem
}

.about-us-text {
max-width: 50%;
margin-left: auto;
margin-right: auto;
}

.logo-colour {
display: flex;
justify-content: center;
margin-top: 3rem;
background-color: #D9BCA9;
}

.history-grid {
display: grid;
grid-template-columns: 25% 25%;
grid-template-rows: 50% 50%;
margin: 4rem;
margin-bottom: 11rem;
text-align: center;
justify-content: center;
gap: 4rem;
}

.hist-image-1,
.hist-text-1,
.hist-text-2,
.hist-image-2 {
margin-top: auto;
margin-bottom: auto;
}

@media (max-width: 60em) {
.history-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 25%);
gap: 4rem
}
}

@media (max-width: 30em) {
.history-grid {
grid-template-columns: 1fr;
grid-template-rows: 10% 40% 40% 10%;
margin-bottom: 15rem;
gap: 4rem
}
}

.share-us-on {
text-align: center;
}

.share-btn {
margin-left: auto;
margin-right: auto;
margin-bottom: 5rem;
width: 217px;
padding: 20px;
background-color: #D9BCA9;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
}

.share-btn:hover {
transform: scale(1.1)
}

.share-btn a {
color: black;
font-size: 18px;
}

.email-btn {
position: fixed;
margin: 10px;
bottom: 0px;
right: 0px;
background-color: #D9BCA9;
border: solid;
border-color: black;
border-width: 1px;
border-radius: 100px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
z-index: +2;
}

.email-btn a {
color: black;
font-size: 21px;
}

.logo-bottom {
padding-top: 5px;
margin-left: 4px;
max-width: 200px;
}

.navbar-bottom {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
position: fixed;
bottom: 0px;
width: 100%;
background-color: #D9BCA9;
height: 60px;
margin-top: 50px;
}

.bottom-row ul {
display: flex;
margin: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 60px;
font-size: small;
}

.bottom-row li {
list-style:  none;
}

.bottom-row li a {
text-decoration: none;
padding: 1rem;
display: block;
color: black;
}

@media(max-width: 832px) {
.bottom-row {
display: none;
}
}

.grid-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh
}

.team-title {
text-align: center;
}

.profile-pics-1 {
display: flex;
flex-wrap: wrap;
margin: 4rem;
text-align: center;
justify-content: center;
gap: 4rem;
}

.profile-pics-2 {
display: flex;
flex-wrap: wrap;
margin: 4rem;
text-align: center;
justify-content: center;
gap: 4rem;
}< /code>



[i]

[url=#]



[/url]

[list]
[*]
[url=#]Home[/url]

[*]
[url=#]Meet The Team[/url]

[*]
[url=#]Vacancies and Qualifications[/url]

[*]
[url=#]Web Dev Courses[/url]

[*]
[url=#]Apply[/url]

[/list]






[img]images/favicon.ico[/img]

[img]images/favicon.ico[/img]

[img]images/favicon.ico[/img]

[img]images/favicon.ico[/img]



Meet our Team
Meet the Hot Beans team


[img]images/favicon.ico[/img]

[img]images/favicon.ico[/img]

[img]images/favicon.ico[/img]

[img]images/favicon.ico[/img]




[url=#]
[/i]
[/url]



[img]images/logo.png[/img]

[list]
[*]
[url=#]Home[/url]

[*]
[url=#]Meet The Team[/url]

[*]
[url=#]Vacancies and Qualifications[/url]

[*]
[url=#]Web Dev Courses[/url]

[*]
[url=#]Apply[/url]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/762 ... iewport-is