Sometimes it can be easy to lose track of which responsive CSS styles are being applied in a responsive design.

Here is a simple way to add a debugging message to remind you of the current breakpoint. It makes use of the
::after CSS pseudo-selector to append the current media query that is evaluating as true. In the case of this demo,
the ::after content updates based on the current max-width of the viewport.

(Make sure to also click here to see the full demo. Resize the window to see the debugging message update):

Here's the HTML:

<div id="demo">

	<div id="responsive-message">
	breakpoint 
	</div>

	<div id="main-content">
		<div id="photos">
			<div class="photo">
				<img src="images/mist.jpg">
			</div>
			<div class="photo">
				<img src="images/bay.jpg">
			</div>
			<div class="photo">
				<img src="images/sunset.jpg">
			</div>
		</div>
	</div>

</div>

Here's the CSS:

body {
	background: #222;
	font-size:1em;
	font-family: "Helvetica Light", Sans-serif, Arial;
	margin:0;
	padding:0;
}

#demo {
	position: relative;

}

img {
	max-width:100%;
}

#responsive-message {
	position:absolute;
	top:3em;
	width:100%;
	background: rgba(170, 220, 250, 0.90);
	color:#000;
	font-size:1em;
	font-weight:100;
	padding:1em;
}
#responsive-message::after {
	content:" max-width: 1500px";
}

#main-content {
	display:inline-block;
	padding:1em 0 2em 0;
	text-align: center;
}
#main-content #photos {
	margin: 0 auto 0 auto;
	width: 99%;
	display:inline-block;
}
#main-content #photos .photo {
	width:30%;
	float:left;
	margin:1em;
}

@media screen and (max-width: 1200px) {
	html, body {
		overflow-x:hidden;
	}
	#main-content #photos .photo  {
		width:40%;
	}
	#responsive-message::after {
		content:" max-width: 1200px";
	}
}

@media screen and (max-width: 550px) {
	#main-content #photos .photo  {
		width:85%;
	}
	#responsive-message {
		font-size: 1em;
	}
	#responsive-message::after {
		content:" max-width: 550px";
	}
}