Responsive design help?

html-css

#1

Hi, I’ve been trying to get my head round CSS and responsive design for the last few weeks or so and I’m struggling with something on my test site.

[see profile for link]

When viewing this on a PC it’s showing white text with a dark grey background on the banner but when viewing it on smaller screens such as a small laptop or mobile device it’s showing just black text and I can’t figure out why. Any help would be appreciated! :slight_smile:


#2

reset.css should load before your custom stylesheet, as should the fonts.


#3

Ooh, I didn’t even know that would be an issue, thanks! It’s working on my laptop now but still not my mobile, perhaps I have the responsive design code wrong?


#4

Without analyzing, I can see a number of device widths. How many are you going for?

Perhaps organize your style sheet so all the media queries are at the bottom and comment your intended device widths and the custom styles for each, then build the queries. Sometimes just going to paper with our ideas helps get the code in order.