Daarnaast krijg ik ook foutmeldingen bij de validator 2 van de youtube filmpjes.
https://i.postimg.cc/vmK6FWz8/Schermafbeelding-2025-03-26-091656.png
De lay-out van de 3 afbeeldingen en 2 filmpjes moet had de volgende lay-outs.
Vanaf 1024px alles naast elkaar met ruimte ertussen.
In 768px de 3 foto's naast elkaar en de 2 filmpjes eronder over de hele breedte.
In 320px alles onder elkaar.
De 320px is onder elkaar maar de witruimte is weg rechts.
Mijn vraag is duss of iemand mij kan helpen dit grid probleem op te lossen?
<!-- Foto- en video sectie -->
<section class="media">
<h2>Foto's en video's</h2>
<div class="grid">
<img src="Media/Index/Photo/Girls-on-car.jpg" alt="Meiden zitten op een auto">
<img src="Media/Index/Photo/Navigation.jpg" alt="Navigatie">
<img src="Media/Index/Photo/Pin-location.jpg" alt="Zet de route uitzetten">
</div>
<!-- YouTube Video -->
<div class="video-container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/75nwHtfxSXI?si=_WpPWU94GMtxiGuw"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
<div class="video-container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/xOU1EFf3qik?si=u5A8mnxIjo-ZN88M"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
</section>/* CSS-variabelen */
:root {
--primary-color: #ff6600;
--secondary-color: #333;
--font: 'Roboto', sans-serif;
}
body {
font-family: var(--font);
margin: 0;
padding: 0;
background: #f4f4f4;
}
/* Header en navigatie */
header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--secondary-color);
padding: 15px 30px;
}
.logo {
display: flex;
align-items: center;
}
.logo h1 {
color: white;
margin-left: 10px;
font-family: "Monoton", sans-serif;
font-weight: 400;
font-style: normal;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
position: relative;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: block;
}
nav ul li a:hover {
background: var(--primary-color);
}
.active {
background-color: #ff6600;
}
/* Submenu */
.submenu {
display: none;
position: absolute;
background: var(--secondary-color);
list-style: none;
padding: 0;
margin: 0;
}
nav ul li:hover .submenu {
display: block;
}
.submenu li a {
padding: 10px;
display: block;
width: 150px;
}
/* Hero afbeelding */
.hero img {
width: 100%;
height: 200px;
display: block;
}
/* Content sectie */
.content {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px;
margin-right: 20px;
margin-left: 20px;
}
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 verhouding */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Foto's en video's */
.media {
padding: 40px;
text-align: center;
}
.media .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.media img, .media video {
width: 100%;
border-radius: 10px;
}
/* Plaatjes met tekst */
.info {
padding: 40px;
}
.row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.row img {
width: 128px;
height: 128px;
}
.reverse {
flex-direction: row-reverse;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
background: var(--secondary-color);
color: white;
}
/* Responsiviteit */
@media (max-width: 1024px) {
.content {
flex-direction: column;
text-align: center;
}
.row {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 768px) {
header {
flex-direction: column;
text-align: center;
}
nav ul {
flex-direction: column;
}
.media {
flex-direction: row;
}
}
@media (max-width: 320px) {
.logo h1 {
font-size: larger;
}
.hero img {
width: 100%;
height: auto;
}
.media .grid {
flex-direction: column;
}
.info {
font-size: small;
}
.row {
flex-direction: column;
}
}
/* Google Maps container */
.map-container {
width: 100%;
height: 400%;
text-align: center;
}
#map {
width: 100%;
height: 100%;
}
/* Contactformulier */
.contact-form {
max-width: 600px;
margin: 40px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.contact-form h2 {
text-align: center;
color: var(--secondary-color);
}
.contact-form label {
display: block;
margin-top: 10px;
font-weight: bold;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: var(--font);
}
.contact-form textarea {
height: 150px;
}
.contact-form button {
width: 100%;
padding: 10px;
margin-top: 15px;
background: var(--primary-color);
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.contact-form button:hover {
background: #e65c00;
}
/* Responsiviteit */
@media (max-width: 768px) {
.contact-form {
width: 90%;
}
}
/* Tabel */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #333;
color: white;
}
.tabel {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px;
margin-right: 20px;
margin-left: 20px;
}
