Losing css styling when page narrowed to cellphone width

Hi folks.

Please refer to this page.

The editorial notes (blue font) revert to plain text when the page is narrowed beyond a certain point. I want the ed notes styling to be retained for cellphones. How do I manage this, please?

I suspect it’s something to do with closing off a media query in the CSS style sheet, but I thought I had. Bit baffled, so any help would be appreciated.

Cheers

Assuming that you want .ednotes to function at all viewport widths, it should be placed outside of any media query in css.

Yes, ronpat, that’s what I meant to achieve by closing off the media query before the ednotes code in the stylesheet. I did that by inserting a curly closing bracket before the ednotes code, but maybe there’s another way to place the code outside any media query?

Must admit, I’ve struggled to understand anything to do with media queries. It’s an area I suppose I’ve avoided looking into through some stupid fear of the unknown and an assumption that it’s something complex.

Cheers

On line 85 of style.css there is a media query that is never closed.

@media screen and (min-width: 600px) {

It is influencing everything beneath it including .ednotes which is near the bottom of the page.

So ronpat, that curly closing bracket I’ve inserted on its lonesome before ednotes etc doesn’t close that line85 media query, evidently?

I ask the question without actually looking at the stylesheet (some limitations in opportunity at the moment).

This brings me to another gap in my coding education: when specific lines of the stylesheet are referred to, I am never sure I’m locating the right line because I have to count it down manually - there are no numbers on my stylesheet. I’m assuming there must be some way to make them appear…?

Cheers

I think most text editors have an option to display line numbers. I would imagine that yours does too. If not, try Notepad. How are you editing/writing your code now? What is your environment like?

If a preceeding media query is left open, it influences everything that follows it.

The closing brace that you added does indeed close the media query immediately above it, but the earlier media query is still open and affecting everything on the page.

Something similar is happening in the HTML code on your other page. Lots of unmatched/unclosed tags. HTML is more forgiving than CSS so you don’t see the errors in the browser window, but the validator flags them.

Hi ronpat - pls excuse this delay in getting back. Lots of distractions at the moment…

Ta for toubleshooting the media query issue. You were quite right, of course. I added a second curly closing bracket and all is now well.

I make my code mods in my Wordpress child theme Dashboard CSS stylesheet. I’ve since established that the Stylesheet doesn’t provide line numbers. I often paste code into Notepad to save it initially, then subsequently copy and paste it from there into the WP Stylesheet, but I’ve never seen any line numbers in Notepad, either. There’s some way to switch them on so they display, I’m guessing?

I was dimly aware that line numbers of a website page can be seen using Firebug. I’ve set aside some time over the weekend to do a Firebug tutorial so I can get better acquainted with it.

Have I answered your question about the environment I’m working in? If not, not sure what you mean. :confused:

Cheers