My desktop website appears exactly as I want it to. When inspecting the site on the console to test responsiveness, everything seems fine. However, once I upload the changes to AWS and view the website on my phone, the vh and flexbox properties are not functioning as expected.
When viewing the website on desktop and toggling the device toolbar in the console to emulate a phone screen, everything works perfectly. But, when actually accessing the site from a mobile device, the layout is not what was seen in the console.
I need all elements - the nav-bar, question, chatbox, and input box - to be visible without scrolling. Currently, users have to scroll through the chat before reaching the input box, at which point they cannot see the navbar or question.
Despite following advice provided in this guide
Chrome / Safari not filling 100% height of flex parent
I am still facing difficulties. It would be incredibly helpful if someone could visit my website and identify the issue causing these problems.
Due to the extensive amount of code, I am unable to share it here to pinpoint the exact problem.
I have removed any height:100% css styles and minimized the number of height: ??px css styles. All height: 100vh attributes are correctly set along with display:flex properties. Any assistance in resolving this issue would be greatly appreciated.
Here is how the mobile version looks in the web console (which is correct)
https://i.sstatic.net/lWt9A.png
And here is an example of how it appears on a mobile device (which is incorrect)
https://i.sstatic.net/vPBxj.png
EDIT: Can someone please delete this post?
I managed to resolve the issue by applying display:flex and flex:1 to the appropriate divs (I had missed a few).