Website not responsive on mobile after deployment

I have successfully deployed my website. The problem that I have however is that my website is responsive on browser even when shrinking it to mobile size but in my local phone looks completely different, the layout of my navigation bar and and drop down links do not look how I intend them to like how it looked on my desktop. If someone could explain what I am doing wrong I would appreciate it, this is my very first website I have ever created.


This is what it looks like on my local iphone:

Hi @tito3286

The logo is not scaling to suit the screen, it has a fixed width. Thus, when the screen is too small to allow the navigation menu to sit to the right (as I suspect you wish) it wraps below the logo.

That makes sense. Any idea why the layout looks different in my desktop when I scale it down to a mobile size compared to my local phone?

This is how I would thought it would look like before deploying:

The behaviour is replicable on desktop too when using Firefox (though not when scaling the window in Chrome.)

Tip: Rather than scaling the entire window (which isn’t accurate), use Developer Tools.

This gives the open to test different devices/screen sizes where the same behaviour is visible.

I did not know about the developer tools. This is really gonna help me from now on, Thank you!