So sehen Sie verpackte Inhalte, wenn es nicht aus dem Ansichtsfenster ist, wenn das Ansichtsfenster auf eine bestimmte G ⇐ CSS

[Anonymous]

Ich habe versucht, meinen Inhalt zu zentrieren, und meine Art, dies zu tun, bestand darin, das Ansichtsfenster auf eine bestimmte Höhe zu setzen und alle Inhalte im Inneren zu zentrieren. Ich möchte jetzt jedoch in der Lage sein, meine Flexbox so zu wickeln, dass jedes Bild über den anderen sauber ist. Dies hat jedoch das Problem verursacht, das ich nach oben scrollen muss, um die Bilder zu sehen, da das Ansichtsfenster eine bestimmte Höhe ist. Gibt es eine Möglichkeit, diesen oder sogar einen besseren Weg zu beheben, um alle meine Inhalte zu zentrieren, beide Flexboxen und den Titel zu sein?

Code: Select all

* {
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]