Having difficulty with the layout of these images / video for this web page

Jul 5, 2022
Reaction score
I am currently having difficulty trying to contain these images / video as shown as well as making them web responsive. When running my code, my images fill up at least half of the page rather than 1/4 of the page in which I need. The image below is showing what I am currently trying to make. So far I have the first 3 images starting from the left and the video which shows up at the bottom of the page. I'm new to this platform so anything will help!

NOTE: The images shown are images the company has given me to use so if you run my code, you will not be able to see them.
Screen Shot 2022-07-03 at 6.42.19 PM.png

<!DOCTYPE html>
<html lang="en">

    <!-- Meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link rel="stylesheet" href="styles.css">

    <!-- Banner Section -->
    <div class="banner">
        <div class="content">
            <div class="title">Lorem Ipsum</div>
            <div class="subTitle">Dolar sit amet aran</div>
            <div class="sentence">Rerum quas delectus non ab eveniet nihil, eaque tempora incidunt blanditiis, molestias
                unde id? Tempora eius illo labore officiis quis quae.</div>
    <!-- Section 2 -->
    <div class="section-2">
        <div class="container">
                    <img src="./images/COLLAGE_IMAGE_1.jpg" alt="Image #1">
                    <img src="./images/COLLAGE_IMAGE_5.jpg" alt="Image #2">
                    <img src="./images/COLLAGE_IMAGE_4.jpg" alt="Image #3">
                    <video width="500" height="250" controls>
                        Your browser does not support the video tag.

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

/* Global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;;

/* Banner Section */
.banner {
    width: 100vw;
    min-height: 55vh;
    background: url(./images/HERO\ 1.jpg) no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: bottom;
  .content {
    width: 90%;
    text-align: center;
  .content .title {
    color: #de041c;
    font-size: 65px;
    font-weight: 800;
    letter-spacing: 2.0px;
    text-transform: uppercase;
    margin-bottom: -20px;
  .content .subTitle {
    color: #fff;
    font-size: 42px;
    font-weight: 600;
    text-transform: uppercase;
  .content .sentence {
    color: #fff;
    font-size: 16px;
    margin: 30px 0 0 0;

  /* Section 2 */
  .section-2 {
    border-top: 50px solid #de041c;

  /* Media Queries */
  @media only screen and (max-width:320px) {
      .container {
          flex-direction: column;
          grid-template-columns: 1fr;
          grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
Nov 13, 2020
Reaction score
You can do CSS-Grid without adding the @media only screen and (max-width:320px) {...}.
The 'flex-direction: column;' is not a part of CSS-Grid. And 'grid-template-columns: 1fr;' is the default and not needed.
From what you gave us in the image. I would make two columns using 1fr. Then, the right one is styled for the SKILL ASSIGNMENT.
Then make the left a second grid where the images are and work with those rows, individual columns (the images), and the video for the last row.

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Latest member

Latest Threads