CSS Classes for Hiding on Desktop and Mobile

Here are some CSS classes for hiding a component on desktop and/or mobile. This seems a little dirty since you may ideally want components that are responsive. However, with some designs, you don’t have choice.


// LG =>1200px
@media (min-width:1200px){
   .hide-on-desktop {
      display: none;
   }
}

// MD 992-1199px
@media (min-width:992px) and (max-width:1199px) {
   .hide-on-desktop {
      display: none;
   }
}

// SM 769-991px
@media (min-width:769px) and (max-width:991px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Tablet 321-768px
@media (min-width:321px) and (max-width:768px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Phone =<320px
@media (max-width:320px) {
   .hide-on-mobile {
      display: none;
   }
}
Advertisements

ACF Repeater Loop Ready for HTML

Why is this needed?

I use this loop all the time and I always have to close out each line of PHP in order to pepper it with my markup. So this is just a way to save a little time.

<?php if( have_rows('repeater_field_name') ): ?>
   <?php while ( have_rows('repeater_field_name') ) : the_row(); ?>
      <?php the_sub_field('sub_field_name'); ?>
   <?php endwhile; ?>
<?php else: ?>
   <!-- there are no rows -->
<?php endif; ?>