With Safari: the background color of the site does not change when changing the size.

Safari has a minimum width that it's window can be, try testing on chrome with dev tools or another browser.

Hi and thank you

But can you elaborate further. I am learning this program as we speak. Cheers.

Did you add your responsive.css into index.html? This code look like pretty good

Yes. As I explained the background color changed to Navy once I wrote the code.... but it does not change based on the size of the Safari's screen (you know from white to Navy, etc). I don't know whether I need to do something with my Apple configuration.

Hm, this code means if your screen size more than 480px background change to Navy. Try to set screen size less than 480px and this should work

Might be silly but have you defined the css for outside a media query? this will only work from 480px and above so below that it will change to a default but its always good to define it anyway.

body {
    background-color: #fff;
}

@media (min-width: 480px) { 
    body { 
        background-color: blue; 
    }
}

try without the 'screen and' also for debugging

hi all,

Thank you both for the tips and responds.

At the end this is what I did ( it is really silly): Since the color did not change after reducing the size of the screen as much as Safari allowed me, I increased the min-width in the coding to 600px and now it works. Maybe because this Mac is retina-display, even the smallest screen don't get to lower than 480px (I have no idea)

Now, if I the above is correct, by any chance do you know how the developers working with these computers can cross-check that the coding works for a much lower resolution level (smart phone, etc)??

Many thanks

Pedro.

Thank you so much .... great!