Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 147

#close-this-room { margin: 1em auto 0; }
#close-this-room label { width: 59%; float: left;}
#close-this-room label input { width: 88%; margin: 0; }
#close-this-room input { float: left; margin: .6em 0 0; }
}
@media screen and (max-width: 768px)
{
form,form#attending,form#ask-a-question,#close-this-room {
float: none;
width: 90%;
margin: 0 auto 3em;
}
#ask-a-question label,#close-this-room label { width: 270px; }
#ask-a-question input,#close-this-room input {
float: none;
margin: 0 auto;
}
/* New close rules */
#close-this-room { margin: 1em auto 0; }
#questions.presenter li:before {
top: auto;
right: 24px;
bottom: 6px;
left: auto;
z-index: 10;
}
}
Save and reload the page in your browser. You now have a responsive presenter view (see Figure 7-27 ).