You are using the Skeleton framework.
If you take a look at "assets/design/css/skeleton.css" you will find the following:
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
AND
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
If you want to keep your CSS in line with Skeleton you can preset it to the following:
@media only screen and (max-width: 767px) {
.container .featured {display:none;}
}
This says: any device viewport with a size below 767px should not display the featured section, everything above this size should show the section.
The problem here (which could possibly arise) is: you are hiding a section that is nested. You could end up with an empty coloured block (in your design, grey), which is possibly not what you want.
You could create a universal class that can be added to any element that you don't want to be shown in mobile devices.
Example CSS:
@media only screen and (max-width: 767px) {
.hidemobile {display:none;}
}<section class="container hidemobile">
<article class="sixteen columns zeroed">
<section class="featured">
<div class="eight columns alpha">
<div class="padding">
POST CONTENT
</div>
</div>
<div class="eight columns omega">
<div class="padding">
POST CONTENT
</div>
</div>
<div class="clear"></div>
</section>
</article>
</section><section class="container">
<section class="container hidemobile">
☆ A M B ☆
