search

quinton-ashley / p5play-web

The website for p5play.org
17 stars 13 forks source link

[css] The "Created by Quinton Ashley" section of the top page on smartphones is sticking out at the top and bottom. #36

Closed ShiMeiWo closed 2 months ago

ShiMeiWo commented 3 months ago

ref: https://github.com/quinton-ashley/p5play-web/pull/34#issuecomment-2063086625

In non-English language displays, the "Created by Quinton Ashley" section is overhanging the display area. Possible solutions to the problem are as follows:

1. To change #md15 element into scrollable container:

@media screen and (max-width: 1030px) {
  /* snip! */

  #md15 {
      height: calc(100% - 2rem);
      overflow-y: auto;
  }
}

image

2. To add {position: relative; height: auto} style at the parent element of img{position: absolute; height: auto} to fix the origin of coordinate and calculate imase position:

es)

image

ja)

image

en)

image

3. To change the background photo to be represented by the container's background instead of img:

es)

image

ja)

image

en)

image

Conclusion

The easiest way is #1, but the drawback is that they have to scroll to see the full text. As a front-end developer, I'd love with #3, but if it has to be an <img> for accessibility reasons, then it's not a candidate. #2 requires more CSS modifications and calculations, but is a good balance between markup and look-and-feel.

If without the aesthetic requirements, I would recommend #1. Please let me know what you think.

Thanks!

ShiMeiWo commented 3 months ago

@quinton-ashley

image

Understood. Then, I will adopt #1.

Thank you for your patience...

quinton-ashley commented 2 months ago

sorry I liked your post but forgot to respond! I want to try option 3 but will merge your PR for now. Thank you!

ShiMeiWo commented 2 months ago

@quinton-ashley Okay, I will try #3 (display "the Ashleys image" as the element's background).

How about markup <img> ? Can I remove it? Otherwise, I will conceal it with {display: none;} etc.