#My website page is not responsive on Google Chrome and Opera but in Developers Tools it is

7 messages · Page 1 of 1 (latest)

lost pulsar
#

Hello, I did my website homepage in responsive way. This is link: https://inferno14.github.io/Become-a-BBQ-master/

Media queries is set for smaller screen size at breakpoint of 500px. At that breakpoint layout should change from two columns side by side to one column (stack one top of another). But when I go to resize width of browser Opera or Chrome, that does not happen. But when I go to inspect element in Developer Tools and change there width then it works great. Like it should. In Mozilla works too.

Here are screenshots:

https://prnt.sc/C7IRrxJdN9RJ In Google Chrome, not in DevTools, not working responsiveness

https://prnt.sc/S7Y28MB3EfOT In DevTools of Google Chrome, responsiveness works

Why is that?
Thanks

Lightshot
Screenshot

Captured with Lightshot

Lightshot
Screenshot

Captured with Lightshot

neon lily
#

Hi @lost pulsar I have just had a quick look and actually I think it is working fine. If you change your media query to a higher value, say 800px, it works fine when shrinking the browser window. The issue could just be when you shrink your chrome browser, it done not go down to 500px. You will see below it even works at 550px

warped thicket
#

Remember that display: flex is at the parent and affects the child elements. There is something at the html structure that 'inverts' the media query

#

A fix could be adding a container div for intro and main-content, with flex

warped thicket
lost pulsar