Changing the CSS

Hi

I am using your theme and really like it, especially the new updates, looks great. It’s here

https://www.graphitti.org

I draw interactive graphics and use iframes to embed them in the site. I want to be able to embed different frames depending on the device, e.g. mobile, tablet etc. I got a bit of css code that I have been trying to add using the stylesheet editor. It works on other themes but not, seemingly, with boot press. Have you any idea why? Here it is

@media all and (min-width: 959px) {
	.content .desktop {
		display: block;
	}

	.content .tablet {
		display: none;
	}

	.content .phone {
		display: none;
	}
}

@media all and (max-width: 720px) {
	.content .desktop {
		display: none;
	}

	.content .tablet {
		display: block;
	}

	.content .phone {
		display: none;
	}
}

@media all and (max-width: 479px) {
	.content .desktop {
		display: none;
	}

	.content .tablet {
		display: none;
	}

	.content .phone {
		display: block;
	}
}

Thanks for your help

Tom