Mein CSS-Grid funktioniert unter Firefox und Safari, aber nicht unter Google Chrome (Der Abstand um meine Bilder ist fal ⇐ HTML

[Anonymous]

Ich habe ein Problem, dass mein CSS irgendwo falsch ist. Auf Safari und Firefox funktioniert es. Ich vermute, dass es etwas mit meinem Rasterlayout zu tun hat. Ich bin neu in CSS-Grids, bevor ich Bootstrap verwendet habe.Mein Problem ist, dass die Auffüllung nur auf der linken und rechten Seite funktioniert, die Auffüllung zwischen den Abschnitten oben und unten ist falsch. Der Bildcontainer sieht zu groß aus.
Auf kleinen Geräten funktioniert es, da ich dort keine Raster verwende. Aber wenn Sie das Ansichtsfenster/den Browser auf mehr als 768 Pixel vergrößern, sind die Bilder zu groß und die Auffüllung funktioniert nicht.
Hier ist mein Code:
Auf jsfiddle können Sie mein Problem besser sehen (768px):
jsfiddle für eine bessere Ansicht

Code: Select all

/*******************************************
main.css
*******************************************/
* {
margin: 0;
padding: 0;
text-decoration: none;
font-size: 20px; }

li {
list-style-type: none; }

/*******************************************
COLORS / LINKS
*******************************************/
:root {
--primary: #00a2ff;
--secondary: #151515; }

a:link {
color: #fff; }

a:visited {
color: #fff; }

a:hover {
color: #fff; }

a:active {
color: #fff; }

/***********************************************
TEMPLATE CONTAINER
***********************************************/
.container {
display: grid;
height: 100vh;
width: 100vw; }

/* Main Container */
header {
text-align: center;
z-index: -3; }

main {
padding: 0; }

footer {
text-align: center; }

/* Home Site */
.slug-wrapper {
padding: 25px; }

.foto-margin {
margin-bottom: -5px; }

/* Logos - Template */
#inexorablez {
margin-top: 40px;
text-align: center; }

#kett {
text-align: center;
margin-top: 60px; }

#superior-attack {
text-align: center;
margin-top: 60px; }

#christian-s {
text-align: center;
margin-top: 60px; }

#fh-flensburg {
text-align: center;
margin-top: 60px; }

.galleryimage {
width: 100%;
height: auto;
pointer-events: none;
margin-bottom: 30px;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/* Contact - Template */
#keine-angst-ich-beiße-nicht {
text-align: center; }

#dont-worry-i-wont-bite {
text-align: center; }

.form-contact-container {
margin: 50px 25px 0 25px; }

/*******************************************************
Home (Background)
*******************************************************/
.slug {
text-align: center;
background-color: #fff;
font-size: 2.6em; }

.logos-section {
padding: 25px;
background-color: #e7e7e7; }

.photos-section {
padding: 25px; }

.sketches-section {
padding: 25px;
background-color: #e7e7e7; }

/*******************************************************
Images
*******************************************************/
.logo-link {
width: 100%;
height: 100%;
background-color: #fff; }

.home-link {
width: 100%;
height: auto;
display: inline-block;
padding: 10px 0;
font-size: 0.4em; }

.main-content,
.main-content-4,
.main-content-6 {
margin-bottom: 30px; }

.main-content-2,
.main-content-3,
.main-content-5 {
background-color: #fff !important; }

.card-headline {
font-size: 2em;
font-family: "Smooch Sans";
transition-delay: 0s, 0s;
transition-delay: 0.1s;
border: none;
height: auto;
align-content: center;
text-align: center; }

.card {
background-color: var(--secondary);
color: #fff;
align-content: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.card:link {
color: #fff; }

.card:visited {
color: #fff; }

.card:active {
color: #fff; }

/*******************************************************
Media Queries - (tablets, 768px and up)
*******************************************************/
@media (min-width: 768px) {
/* PRELOADER */
#loader {
top: 380px;
left: 225px; }

#loader-2 {
top: 383px;
left: 228px; }

#loader-3 {
top: 386px;
left: 231px; }

#no_video {
bottom: 0;
left: 25%; }

.top-btn {
right: 45px;
bottom: 45px; }

#noscript {
bottom: 50px;
left: 26%;
font-size: 3em;  }

#rc-imageselect, .g-recaptcha {
-webkit-transform: scale(0.77);
-ms-transform: scale(0.77);
transform: scale(0.77);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0; }

/* TEMPLATE CONTAINER */
main {
display: grid;
gap: 25px; }

#home main {
display: grid;
gap: 0px; }

.logos-section {
display: grid;
grid-column: 1 / 5;
padding: 50px; }

.logos-image {
grid-column: 1 / 3; }

.logos-link {
grid-column: 3 / 4; }

.slug-wrapper {
display: grid;
grid-column: 1 / 5; }

.contact-section {
display: grid;
grid-column: 1 / 5;
padding: 50px; }

.photos-section {
display: grid;
grid-column: 1 / 5;
grid-auto-flow: dense;
padding: 50px; }

.photos-image {
grid-column: 2 / 4; }

.photos-link {
grid-column: 1 / 2; }

.sketches-section {
display: grid;
grid-column: 1 / 5;
padding: 50px; }

.sketches-image {
grid-column: 1 / 3; }

.sketches-link {
grid-column: 3 / 4; }

#kontakt form {
padding: 50px 150px; }

#kontakt header {
padding-bottom: 100px; }

#kontakt main {
display: inline; }

.form-contact-container {
margin: 0 25px; }

#logos main {
display: inline; }

#fotos .gallery {
display: contents; }

#fotos main {
display: inline;
text-align: center; }

.form-container {
display: grid;
grid-column: 1 / 5; }

#contact-form {
padding-left: 170px; }

.input-form {
width: 80%; }

#inexorablez {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#kett {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#superior-attack {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#christian-s {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

#fh-flensburg {
font-size: 2.5em;
margin: 60px 132px 0px 132px; }

/* IMAGES */
.card {
background-color: var(--secondary);
color: #fff;
align-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); }

.card-headline {
font-size: 2em;
transition-delay: 0s, 0s;
transition-delay: .1s;
border: none;
height: 100%;
align-content: center;
text-align: center; }

.galleryimage {
width: 70%; }

/* NAVBAR */
.topnav a {
font-size: 1.1em; }

.topnav.responsive a {
padding: 15px 0px; }

.home-link {
display: contents; }

.main-headline {
margin-top: 200px; }

.logo-headline {
margin-top: 60px; }

#logos main {
background: #151515;
background: linear-gradient(345deg, #151515 15%, #9acd31 52%, #151515 75%); }

#sketches main {
background: #151515;
background: linear-gradient(345deg, #151515 15%, orange 52%, #151515 75%); }

/* Imprint */
#impressum header {
padding: 0px 100px; }

#impressum p {
padding: 0px 100px; }

#impressum h3, h4 {
padding: 0px 100px; }
}

Code: Select all

Ausgewählte Arbeiten  von mir[/b][b]  



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

[url=#]
Siehe Logos
[/url]





[url=#]
[img]https://picsum.photos/360/260[/img]
[/url]

[url=/de/fotos/]
Siehe Fotos
[/url]





[url=/de/sketches/]
[img]https://picsum.photos/360/260[/img]
[/url]

[url=/de/sketches/]
Siehe Sketches
[/url]





Sei nicht[/b] Schütern,
sag [/i]Hallo!

Ich hoffe, jemand kann mir helfen. Danke.