Mobile Landscape View Text Issue
Hey guys, I am having trouble trying to figure this issue out on my own. In the images, I have the issue highlighted in a border. The border does not contribute to sizing issue. In the image where the phone number is broken into two lines, that is from my phone in landscape mode. My phone is an iPhone 14 Pro Max. The image where the phone number is displayed correctly (single line), that is from the inspector on my web browser. I also have a media query set to remove the social icons before the two flex containers meet and jumble the phone number. Everything works great on the inspector, but I cannot figure out the issue when viewing on my mobile device. I have the code attached below:
https://github.com/jvisme1991/photo-display.git
GitHub
GitHub - jvisme1991/photo-display: photo gallery
photo gallery. Contribute to jvisme1991/photo-display development by creating an account on GitHub.
6 Replies
I am not sure where the issue is coming from though, so I am not sure what portion of the code I need to add. I have meticulously dissected the code, and I cannot find the issue. Do i add the full code to codepen?
You seem to have a Github Pages live, right?
https://jvisme1991.github.io/photo-display/
Can't replicate your error though. :/
Yeah, its live. It works on web with responsive view. The issue is present on iPhone through Safari. It breaks the phone number up and I have no clue as to why
First image is through the web on mobile view, and the second image is from my iPhone