Correctly aligning height of two columns, one image one text


Thought I had full rein over grid but I can’t figure this out.
My desired outcome is for the text to remain with it’s current padding/gap without the padding/gap getting bigger on bigger screens (I think the image is causing this?)

Essentially the text should determine the height of the image in the column next door.
I have included the full code including the media queries for 1400px screens, when you expand it to full width, something seems to mess with the buttons as they grow larger and remove the centred text.

The only way that can happen is if the image is removed from the flow and has no influence on that column. If the image is present then the columns heights will be determined by the taller content.

If you really want the text to determine the height then you can do this:

@media screen and (min-width:1400px) {
  .full-image {
    position: relative;

  .full-image img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;

However you can’t use the value contain because that would cause a gap to occur because obviously the image is not the same size as the space available. You have to use the value cover.

Also note that if you have a small amount of text then the image will be very small so you may indeed need a min-height but I’m not 100% sure of your use case.

1 Like

Hi Paul,

Thanks for the response, this works perfectly! Slightly confused on the left/right:0 as it is seemingly working correctly without.

1 Like

Yes its not really needed but I like to be explicit :slight_smile:

Without co-ordinates the element would be auto positioned and that could vary based on text-alignment but as the image is as big as the container it should not matter.

As an aside we had a similar question quite a while ago but using flex instead.