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/
Could you share the code via code pen please?
Well, I am a learner too I’ll try to help you.
If you want to try without sharing the code this might help.
Thanks but does not seem to help
Maybe I am doing smth wrong.
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
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
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!