Feedback on Tribute Page: Difference between desktop and mobile

Appreciate any feedback on my tribute page: https://codepen.io/oscarchankalung/full/bGVZpwr

It works well on desktop browser (Chrome developer tool > toggle device toolbar), but has few problems when loaded on mobile device. Update: these problems only occur when using codepen mobile full, but not codepen mobile debug mode.

  1. The images are stretched vertically even thought height: auto is used. Is it because of flexbox? What is the best way to create a row of responsive image with different width?
<figure id="fig-div">
            <div id="img-div">
                <img
                     id="black-profile"
                     src="https://farm66.staticflickr.com/65535/49924414593_3e8ea96653.jpg"
                     alt="Albert Hofmann in Black"
                />
                <img
                     id="red-profile"
                     src="https://farm66.staticflickr.com/65535/49924937941_7878999088.jpg"
                     alt="Albert Hofmann in Red"
                />
            </div>
</figure>
#img-div {
  /*center*/
  display: flex;
  justify-content: center;
  margin: 0px auto;
  max-width: 800px;
  width: 100%;
  height: auto;
}
#black-profile {
  /*responsive*/
  width: 49%;
  height: auto;
  transform: scaleX(-1);
}
#red-profile {
  /*responsive*/
  width: 51%;
  height: auto;
}
  1. The bottom of the page is not aligned to the bottom of the screen.

  2. Text is too large in mobile landscape. Still figuring out.

Welcome, oscar.

Have you fixed this, because I am unable to reproduce it?