Weird problem with responsive styling at 480px

[cgMultimedia]

Hi, I’m using the Pro theme and the weirdest thing seems to be happening — I have certain CSS set up on my site to kick in at mobile sizes (max-width:767px). I’m pretty sure it was working the last time I checked this, but now, when the browser is ≤480px, those mobile styles are being ignored. Could it be because of the Pro 2.0.4 update I installed a few days ago? I’m mystified and would appreciate your help.

A good page to check is this… visit the page, then resize your browser around the 480px breakpoint:

http://dev.purebuildinggroup.com/event-5/

The two obvious styles to watch for are the H1 over the top banner, and the columns over the image at the bottom of the page. These are the styles I have set up (globally) are these:

@media (max-width:767px) {
.page-banner h1 {
font-size: 30px !important;
}
.flex-center {
display: block;
}
}

Thanks for your time and attention!

[cgMultimedia]

I should note that it seems only my custom styles are being ignored… the theme’s standard column-stacking behaviour seems to be working…

[rad]

Hi there,

Thanks for writing in. You have broken CSS, like this

@media (min-width:481px) and (max-width:979px) {
	.case-studies-text blockquote {
	  padding: 13% 7%;
}

@media (min-width:768px) {

  .ten-twelfths-column {
		padding: 0 8.333%;
	}

}

And it should be like this with proper closing.

@media (min-width:481px) and (max-width:979px) {
	.case-studies-text blockquote {
	  padding: 13% 7%;
}
}
@media (min-width:768px) {

  .ten-twelfths-column {
		padding: 0 8.333%;
	}

}

Any CSS added below the faulty CSS isn’t going to work.

Thanks!