Margin-top:auto pushes item too low

Hi guys!

https://zelenskaya.github.io/experiments/sswitch/sswitch-home-css-grid.html

I am trying to align an image of an athlete to the bottom of the cell in CSS grid.
I set margin-top to auto inside the id of the image but this positions bottom line of the image lower than bottom line of another element in the same row.

http://prntscr.com/oetn2y I want to align bottom line on the athlete and bottom of the photo, like on the original site https://sswitch.ch/

Thanks!!!
Anna

Hi there,

Could you share the code via code pen please?

Well, I am a learner too :slight_smile: I’ll try to help you.

If you want to try without sharing the code this might help.

margin-top: auto;
margin-right: auto;
margin-bottom: 0;
margin-left:auto;

Thanks but does not seem to help :frowning:
Maybe I am doing smth wrong.

https://codepen.io/zelenskaya/full/BgeYWe

I forgot to share the URL! https://zelenskaya.github.io/experiments/sswitch/sswitch-home-css-grid.html

Give me some time I’ll copy your code to my editor to understand what is happening.

Unfortunately, that is not going to be direct help :confused:

I got a bit twisted due to the grid system.

However, what I see is that the p tag for “sswitch”, h1 tag for “Limits can be manipulated”, the greyish background with white circles on and finally the boxer image should be all located in a single div. Then they all should be nested in main tags.

That’s all I can do right now :slight_smile:

Thanks anyway! Somehow this aligning with margin:auto works on the second scroll with the fighter, but not on the first scroll. There must be a simple reason!

1 Like