Getting conditional formatting for an image

[jere_toikka]

Hello,

I would like to set up the screenshotted image for my website kitaratunnitturku.com such that in larger resolutions the picture covers the blank area next to the headline.

As you can see, there is empty space in both directions offset from each other that I would like to close by moving the image higher up with higher resolutions (i.e. when it wouldn’t cover the headline)

[rad]

Hi Jere,

Thanks for reaching out.

That’s quite tricky, but please check this first https://www.youtube.com/watch?v=2KL-z9A56SQ

You would need multiple instances of @media query for each target width, so it would work okay on multiple devices. Let’s say your image class is my_image, then we can assume you wish to control its position on desktop and mobile

/* Desktop */
@media ( min-width: 980px ) {
.my_image {
position: relative;
top: -50px;
}
}

/* Mobile */
@media ( max-width: 979px ) {
.my_image {
position: relative;
top: -20px;
}
}

And so on, depending on screen size you wish to support. That means it will have negative 40px on desktop aligning the image with the headline. Then another negative 20px for other devices, or perhaps just zero since columns collapse on smaller devices.

Hope this helps.