I have a main page container, in which is a container for an image and a div that has text that is to be superimposed on the image and centered.
For some reason I can see flexbot effects (shrinking) when using a computer browser, but it won't work on iPhone. The code is below, and begins with .page-container :
I added the prefixes everywhere and it still doesn't work.
* { font-family: helvetica; color: seashell; background-color: black; opacity: 0.9; text-align: center; margin: 0; padding: 0;}p,li { font-size: 22px;}.page-container { display: flex; display: -webkit-flex; display: -webkit-box; display: webkit-flex; display: webkit-box; justify-content: center; -webkit-justify-content: center; webkit-justify-content: center; align-items: center; -webkit-align-items: center; webkit-align-items: center; height: auto; margin: 0 20px; overflow: hidden;}.mission-container { display: flex; display: -webkit-flex; display: -webkit-box; display: webkit-flex; height: auto; width: auto; justify-content: center; -webkit-justify-content: center; webkit-justify-content: center; align-items: center; -webkit-align-items: center; webkit-align-items: center; flex-direction: column; -webkit-flex-direction: column; webkit-flex-direction: column; flex-wrap: wrap; -webkit-flex-wrap: wrap; webkit-flex-wrap: wrap; margin: 0 20px;}.image-desc { position: absolute; top: 50%; bottom: 50%; width: 100%;}I tried using prefixes and am completely lost. Google doesn't help much. I suspect it may have to do with margins or fixed widths but I sparingly use them, and I feel like I have to with the image.