I cant seem to be able to get the image of the person on the right side of the website to filll the remaining space, its a css issue but cant work it out.
Then obviosuly I need the whole thing to be able to be responsive, whicb it is, but this image also, in that it fills the space it has.
<div class="wp-block-column is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" src="https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1.jpg" alt="" class="wp-image-69" srcset="https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1.jpg 1000w, https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1-300x150.jpg 300w, https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1-768x384.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" width="1000" height="500"></figure>
</div>
@media (min-width: 782px)
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 0;
flex-grow: 1;
}
.entry-content .wp-block-image img {
max-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}
Change height of the image and its container to 100%. object-fit fills up the space correctly then.
Currently your <figure> doesn't have a height, and img has a height of auto. object-fit: cover; is doing it's job here, but since the image height is auto, the height of the image (and filled space) is proportional to the image width. By making the image and it's container's heights 100%, you tell the image to take up the whole space, and then it runs object-fit: cover; to fill the whole space.
.wp-block-image {
margin: 0 0 1em;
height: 100%;
}
.entry-content .wp-block-image img {
max-width: 100%;
height: 100%;
width: 100%;
object-fit: cover;
}