Kevin Powell - Community•12mo ago

Get the image under the text

Hi guys, i want my image under the text on smaller devices. Now the image dissapears when i make the screen smaller. Whats going wrong or can i do better https://codepen.io/Boeroe/pen/wvNdKQM

Boeroe

CodePen

wvNdKQM

...

1 Reply

Kanye•12mo ago

There's multiple ways to go about it, but i just used media querys

.img {
    max-width: 100%;
    height: auto;
}

.img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Media Query for Mobile View */
@media (max-width: 768px) {
    .sections {
        flex-direction: column; /* Stack elements in a column on smaller screens */
    }

    .img {
        max-width: 100%; /* Adjust this to control the maximum width */
        height: auto;
    }
}

.img {
    max-width: 100%;
    height: auto;
}

.img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Media Query for Mobile View */
@media (max-width: 768px) {
    .sections {
        flex-direction: column; /* Stack elements in a column on smaller screens */
    }

    .img {
        max-width: 100%; /* Adjust this to control the maximum width */
        height: auto;
    }
}

Gaming

Programming

Get the image under the text