Responsive page not responding in the way I would like

Hi,

Please find codepen below - I think I have successfully cut and pasted in the relevant code and trimmed out as much irrelevant code as possible - the problem remains in the codepen.

The problem I am trying to fix is that when the viewport width exceeds about 1200px a gap appears between the bottom of the text (ie after “to suit your needs”) and the bottom of the pale yellow box of .

What I want to happen is for the to finish under this text and for the two images to fill the right hand column height. Ideally this would be filled by the images each taking half the height and being centred and the right and left sides being cropped. I only want this ehaviour to occur above the 992px breakpoint.

I hope I have explained this OK. Any help/comments gratefully received. Thank you.

Did you mean something like this:

Specifically:

@media screen and (min-width: 992px) {
  .teachersSection {
    position: relative;
  }
  .teachersArticle {
    position: relative;
  }
  .teachersArticle img {
    position: absolute;
  }
  main.container {
    min-height: 0;
  }
  .teachersArticle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46%;
    object-fit: cover;
  }
  .teachersArticle picture + picture img {
    top: 52%;
  }
}

Yes, I mean exactly like that. Thank you so much. I have such a lot to learn. I will now go and look at what you did. I see some arithmetics in there - I didn’t know one could do that. Thank you again.

Doh! I now see that the “+” sign is adjacent sibling, not arithmetic.

1 Like

Not specific to your particular problem, but since you brought it up… you CAN do arithmetic in CSS, like this for example:

#box {width:calc(100% - 2px)}

You could look up the calc() function to see lots of ways to use it.

1 Like

Interesting. Thank you for that. CSS is so complicated!

OK - my brain is not big enough. I see that the above declaration block positions the second image below the first. And I think

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46%;
    object-fit: cover;
  }

positions the first image?

But I don’t understand how the relative and absolute positions work in this context (I have looked up what they mean).

If I can explain the whole logic it may be easier to understand but there are a few concepts that we need to work with and around.

Firstly you want the height of the text content to dictate the height of the two images so they match the total height of the text. Although with css (grid/flexbox) we can equalise both columns, the tallest column will always dictate the height of the other column. Therefore when we want an image to only occupy 50% height of the text we can’t simply set the image to 50% height because the browser won’t be able to work out what height that is as that column’s own height will be based on its own content (i.e. its images). It’s a circular reference that CSS can’t resolve (although you may find that the odd browser will attempt to do this). e.g. my height is twice the height of something that is half my height; and the height of the smaller something is half the height of my height!

In order to solve this conundrum I remove the image from the flow with absolute positioning. This means that the height of the right column is solely dependent on the height of the text in the left column as grid makes the equal column automatically.

An absolute element is removed from the flow and placed in relation to its nearest ancestor that has a position defined (other than static). If none exists it is placed in relation to :root (effectively the body element). In order to make the image start in the right column we apply position:relative to the right column (which does not alter its position or appearance) and now the image can be placed absolutely using the right column as its point of reference.

An absolute element always knows the top, right, left and bottom of a relative parent (unlike static elements) and we can use that knowledge to make our image 50% of the height of that area. It is then just a matter of placing the first image at top:0 and then the second image at top:50% and setting the image height to 50%. Note that I used 46% image height and top:52% just to make space between the images but if you wanted no space then they would all be at the 50% value.

To recap an absolute element is placed in relation to its nearest positioned ancestor. Note that absolute elements are removed from the flow and do not affect the height of the parent at all. If the parent has no height then there will be nothing to show. However in our case, and as is the case with grid or flexbox or table cells, you can have columns that equalise automatically to the tallest content even if some items have no content (as would be the case with absolutely placed children).

Hope that explains it :slight_smile:

2 Likes

Wow! Thank you so much for your time and expertise.

1 Like