Ektron - register.css seems to break responsive layout

Question

I use some CSS media queries on my Ektron site. They function correctly on the iPhone, but when I try simulating smaller screens on my production site, the breakpoints don't kick in.

Here's the strange part (to me, at least). When I view the site on my development server, the breakpoints work like a champ. The big difference is that on my dev server I've disabled CSS aggregation and minification. So it would appear that something about the css.register method in the framework API is (partially) breaking my responsive CSS. As I said, it seems to work correctly on mobile devices, but I would really like to know why it's not working on the desktop.

I've seen posts referring to minification routines used by certain platforms which break media queries (for example, they remove the word "and"). But that doesn't appear to be happening.

Has anyone else experienced this?

Here's a CSS snippet:

@media only screen and (min-width:320px) and (max-width:767px) {
/* phones, handhelds smaller than iPad */
#subnavbg {
    visibility:hidden;
}
.login-left 
{
    border: none;
    width: 100%;
}
.login-right 
{
    width:100%
}
}

Answer 1

CSS aggregation combines multiple CSS files together. If there is a syntax error in one file, it can affect all the other files that are aggregated with it. Browsers can ignore some syntax errors like a missing close } at the end of a file. However when that file is combined with other files it becomes a problem. Try opening each css file in Visual Studio and check for errors.