Make a Table Mobile Responsive

July 31, 2014 (10 years ago)
CSS, Responsive Design

If you’re using display:table, rather than a real table, for layout, this CSS will make it mobile responsive:

#div {
display:table;
vertical-align:top;
table-layout:fixed;
width:100%;
}

Mobile Nav without Javascript

June 26, 2014 (10 years ago)
CSS, Responsive Design, WordPress

I wasn’t happy with the JS (or jQuery) mobile menu solutions I had been using. They always seemed to have some sort of a glitch.

My solution was to build a mobile nav which gets the menu items with wp_get_nav_menu_items() and then display them as a select drop-down. A little bit of CSS styling on the select box, and voila! A nav menu that works perfectly every time!

Here’s the navigation code:

<div id="navigation" role="navigation">     
          <?php wp_nav_menu( array( 'container' => 'ul' ) );     ?> 
     </div>
<div id="mobilenav">
          <form class="mobilenav">
          <select name="themenu" onchange="location = this.options[this.selectedIndex].value;">
               <option value="" class="first">MENU</option>
               <?php $args = array(
                    'order'                  => 'ASC',
                    'orderby'                => 'menu_order',
                    'post_type'              => 'nav_menu_item',
                    'post_status'            => 'publish',
                    'output_key'             => 'menu_order',
                    'nopaging'               => true );
                    $items = wp_get_nav_menu_items( 'main-menu', $args );            
                    foreach ($items as $item) { 
                    echo '<option value="' .$item->url. '">' .$item->title. '</option>';
                    }
               ?> 
          </select>
          </form>
     </div>

And here’s the CSS:

/* mobilenav styling */

#mobilenav {text-align:center;}
form.mobilenav {margin:.3em;}
.mobilenav select { color:#444;padding:.5em;border:0;margin:.5em 0;text-align:center;border-radius:10px;-moz-border-radius:10px;}
.mobilenav select option {padding:.2em 1em;}

/* base CSS */
#navigation { display:none; }

/* desktop CSS */
#navigation { display:block;}
#mobilenav { display:none; }

Remove Width/Height from Images

June 20, 2014 (10 years ago)
Functions, Responsive Design, WordPress

For making images inside posts mobile responsive:

$ function() {
     $ (".post img) .removeAttr("width") .removeAttribute("height");
}

Or, within your functions.php:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}