Media query doesn't apply on footer section when viewed from a mobile phone but works when resize the browsers screen

Question

The issue I have is, the footer section when viewed from desktop is very responsive and when i change the view port size to mobile and tablet, it's still responsive. But when I open the app from my mobile phone, the footer looks unstyled.

This is how it looks from desktop 360px. Very responsive enter image description here

but from my mobile phone, it looks like this enter image description here

Here's live site's link : https://aginamena.github.io/Designo-Multi-Page-Website-/#/ Here's github repo : https://github.com/aginamena/Designo-Multi-Page-Website-

Answer 1

This is not a media-query issue but the css property - position: absolute in the footer container is messing up the alignment in the Safari browser. I see your issue in Desktop Safari responsive design mode and iPhone device Safari browser. Desktop Chrome and Android device Chrome browser loads the footer fine.

I would suggest creating a footer container with the position: relative and another div with flex without using any absolute positioning. Then adjust the margin as you want it.