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.
- 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;
}
-
The bottom of the page is not aligned to the bottom of the screen.
-
Text is too large in mobile landscape. Still figuring out.