Media query not working in chrome

I am testing out my media query commands under a website running under WordPress 5.3.2.

The above page includes the following lines
1. <div class=”xx-display-if-sidebar”>Display if sidebar</div>
2. <div class=”xx-display-if-no-sidebar”>Display if no sidebar</div>
3. <div class=”xx-display-if-hamburger-menu”>Display if hamburger menu</div>
4. <div class=”xx-display-if-full-menu”>Display if full menu</div>
5. <div class=”xx-display-if-narrow-screen”>Display if narrow screen</div>
6. <div class=”xx-display-if-wide-screen”>Display if wide screen</div>

My child theme includes the following:
@media screen and (max-width: 800px)
{.xx-display-if-sidebar {display: none}}

@media screen and (min-width: 801px)
{.xx-display-if-no-sidebar {display: none}}

@media screen and (max-width: 1100px)
{.xx-display-if-full-menu {display: none}}

@media screen and (min-width: 1101px)
{.xx-display-if-hamburger-menu {display: none}}

@media screen and (max-width: 650px)
{.xx-display-if-wide-screen {display: none}}

@media screen and (min-width: 651px)
{.xx-display-if-narrow-screen {display: none}}

I therefore expect the above lines to appear as follows:
Full screen (1200px): 1,4,6
1100px (hamburger menu): 1,3,6
800px (no side bars): 2,3,6
650px: 2,3,5

This works as expected under Firefox and IE but, on Chrome, lines 3,4,5,6 are always displayed. Although chrome (and FF and Samsung internet) are OK on my phone.

Any thoughts?

Andy

The page I need help with: [log in to see the link]