[FIXED] How can I create these images/col?

Issue

I'm new, and I want to learn how can I create these images to be in the center of the page and I want to be a very small gap between them? May you please help me? I was searching on the internet about how can I create this, but unfortunately I wasn't very lucky. What's the code for this container, row, or column?

Image

Solution

Is this what you want? You wrap the two images inside a div container and apply flex property to it. Then use a padding of 5px on each image to get that little space between. Also I have used a custom height to the container, you can adjust it according to your need.

.container {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

.container > div {
    padding: 0px 5px;
    max-width: 90%;
    height: 325px;
}
  
.container div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 780px) {
    .container {
        flex-direction: column;
    }

    .container > div {
        padding: 10px 5px;
    }
}

<div class="container">
        <div><img src="https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ"/></div>
        <div><img src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"/></div>
    </div>

Answered By - Dorji Tshering

Answer Checked By - Timothy Miller (PHPFixing Admin)