There's a strange issue I've encountered with using margin-bottom in a CSS class for responsive design. Take a look at this example:
HTML
<div class="space-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p>
</div>
CSS
.space-bottom {margin-bottom: 10px;}
The class "space-bottom" with a margin bottom of 10px doesn't seem to work on mobile devices, even when inserted into a Media Query, which is quite perplexing. However, if I change the "class" to an "id" like this:
HTML
<div id="space-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p>
</div>
CSS
#space-bottom {margin-bottom: 10px;}
Surprisingly, it seems to work just fine without needing to be placed within a Media Query.