"Understanding Responsive Utilities"
Bootstrap 3.3.0 Snippet by Bikamek11

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <?php /** * The header for our theme. * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package relia */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'relia' ); ?></a> <!--Top Button Styles --> <style media="screen"> header #logo-conteiner, header #buttons, header .button { display: inline-block; vertical-align: middle; } header #logo-conteiner svg { height: 2em; } header #buttons { float: right; } header .button { padding: 0.4em 1em; background-color: rgba(0, 0, 0, 0.8); border-radius: .4em; color: white; text-decoration: none; margin-bottom: .5em; } header .button .button-logo { width: 1.3em; fill: white; } header .button .button-logo, header .button .button-label { display: inline-block; } @media screen and (max-width: 765px) { header { text-align: center; } header #buttons { display: block; margin-top: 2em; } article #lever, article #jobs-header { font-size: 16px; } } a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} </style> <!--Top Button Styles --> <!-- Header --> <header> <!-- Large Button Set --> <div class="container visible-lg" > <div class="row"> <div id="buttons"> <a href="http://go.joinhouse.party/download-iOS" target="_blank" class="button" id="app-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 381 26 32"><path d="M-270.3,398c0.1,4.9,4.2,6.5,4.3,6.5c-0.1,0.1-0.7,2.3-2.2,4.5c-1.3,2-2.7,3.9-4.9,3.9c-2.1,0.1-2.8-1.3-5.3-1.3s-3.2,1.2-5.2,1.3c-2.1,0.1-3.7-2.1-5-4.1c-2.7-3.9-4.9-11.2-2-16.1c1.4-2.5,3.9-3.9,6.6-4c2.1-0.1,4,1.4,5.3,1.4s3.6-1.7,6.1-1.5c1.1,0.1,4,0.4,5.8,3.2C-267,392-270.3,394-270.3,398 M-274.3,386.1c1.1-1.3,1.9-3.3,1.7-5.1c-1.6,0.1-3.6,1.1-4.7,2.4c-1,1.2-1.9,3.1-1.7,5C-277.3,388.5-275.4,387.5-274.3,386.1"/></svg> <div class="button-label" align="center"> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">App Store</span> </div> </a> <a href="http://go.joinhouse.party/download-play" target="_blank" class="button" id="play-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 383 26 28"><path d="M-288.8,383.3l15.2,8.7l-3.4,3.5L-288.8,383.3L-288.8,383.3z M-291.9,383c0,0.2-0.1,0.3-0.1,0.5v26.9c0,0.2,0,0.4,0.1,0.5l13.5-14L-291.9,383L-291.9,383z M-271.8,400.9l5.1-2.9c1-0.6,1-1.5,0-2l-5.1-2.9l-3.8,3.9L-271.8,400.9L-271.8,400.9z M-273.6,402l-15.2,8.7l11.8-12.2L-273.6,402L-273.6,402z"/></svg> <div class="button-label" "align="center""> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">Google Play</span> </div> </a> </div> <a href="http://localhost:8888/datwordpress/"> <img src="http://localhost:8888/datwordpress/wp-content/uploads/2017/01/cropped-FLUKIlogo2-e1485292711144.png"> </a> </div> </div> <!-- Large Button Set --> <!-- Medium Button Set --> <div class="container visible-md"> <div id="buttons"> <a href="http://go.joinhouse.party/download-iOS" target="_blank" class="button" id="app-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 381 26 32"><path d="M-270.3,398c0.1,4.9,4.2,6.5,4.3,6.5c-0.1,0.1-0.7,2.3-2.2,4.5c-1.3,2-2.7,3.9-4.9,3.9c-2.1,0.1-2.8-1.3-5.3-1.3s-3.2,1.2-5.2,1.3c-2.1,0.1-3.7-2.1-5-4.1c-2.7-3.9-4.9-11.2-2-16.1c1.4-2.5,3.9-3.9,6.6-4c2.1-0.1,4,1.4,5.3,1.4s3.6-1.7,6.1-1.5c1.1,0.1,4,0.4,5.8,3.2C-267,392-270.3,394-270.3,398 M-274.3,386.1c1.1-1.3,1.9-3.3,1.7-5.1c-1.6,0.1-3.6,1.1-4.7,2.4c-1,1.2-1.9,3.1-1.7,5C-277.3,388.5-275.4,387.5-274.3,386.1"/></svg> <div class="button-label" align="center"> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">App Store</span> </div> </a> <a href="http://go.joinhouse.party/download-play" target="_blank" class="button" id="play-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 383 26 28"><path d="M-288.8,383.3l15.2,8.7l-3.4,3.5L-288.8,383.3L-288.8,383.3z M-291.9,383c0,0.2-0.1,0.3-0.1,0.5v26.9c0,0.2,0,0.4,0.1,0.5l13.5-14L-291.9,383L-291.9,383z M-271.8,400.9l5.1-2.9c1-0.6,1-1.5,0-2l-5.1-2.9l-3.8,3.9L-271.8,400.9L-271.8,400.9z M-273.6,402l-15.2,8.7l11.8-12.2L-273.6,402L-273.6,402z"/></svg> <div class="button-label" "align="center""> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">Google Play</span> </div> </a> </div> <a href="http://localhost:8888/datwordpress/"> <img src="http://localhost:8888/datwordpress/wp-content/uploads/2017/01/cropped-FLUKIlogo2-e1485292711144.png"> </a> </div> <!-- Medium Button Set --> <!-- Small Button Set --> <div class="container visible-sm"> <div class="row text-center"> <div class="col-sm-12 text-center"> <a href="http://localhost:8888/datwordpress/"> <img src="http://localhost:8888/datwordpress/wp-content/uploads/2017/01/cropped-FLUKIlogo2-e1485292711144.png" alt="..." class="center-block" /> <br> <div id="buttons1"> <a href="http://go.joinhouse.party/download-iOS" target="_blank" class="button" id="app-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 381 26 32"><path d="M-270.3,398c0.1,4.9,4.2,6.5,4.3,6.5c-0.1,0.1-0.7,2.3-2.2,4.5c-1.3,2-2.7,3.9-4.9,3.9c-2.1,0.1-2.8-1.3-5.3-1.3s-3.2,1.2-5.2,1.3c-2.1,0.1-3.7-2.1-5-4.1c-2.7-3.9-4.9-11.2-2-16.1c1.4-2.5,3.9-3.9,6.6-4c2.1-0.1,4,1.4,5.3,1.4s3.6-1.7,6.1-1.5c1.1,0.1,4,0.4,5.8,3.2C-267,392-270.3,394-270.3,398 M-274.3,386.1c1.1-1.3,1.9-3.3,1.7-5.1c-1.6,0.1-3.6,1.1-4.7,2.4c-1,1.2-1.9,3.1-1.7,5C-277.3,388.5-275.4,387.5-274.3,386.1"/></svg> <div class="button-label" align="center"> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">App Store</span> </div> </a> <a href="http://go.joinhouse.party/download-play" target="_blank" class="button" id="play-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 383 26 28"><path d="M-288.8,383.3l15.2,8.7l-3.4,3.5L-288.8,383.3L-288.8,383.3z M-291.9,383c0,0.2-0.1,0.3-0.1,0.5v26.9c0,0.2,0,0.4,0.1,0.5l13.5-14L-291.9,383L-291.9,383z M-271.8,400.9l5.1-2.9c1-0.6,1-1.5,0-2l-5.1-2.9l-3.8,3.9L-271.8,400.9L-271.8,400.9z M-273.6,402l-15.2,8.7l11.8-12.2L-273.6,402L-273.6,402z"/></svg> <div class="button-label" "align="center""> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">Google Play</span> </div> </a> </div> </p> </a> </div> </div> </div> <!-- Small Button Set --> <!-- XS Button Set --> <div class="container visible-xs"> <div class="row text-center"> <div class="col-sm-12 text-center"> <a href="http://localhost:8888/datwordpress/"> <img src="http://localhost:8888/datwordpress/wp-content/uploads/2017/01/cropped-FLUKIlogo2-e1485292711144.png" alt="..." class="center-block" /> <br> <div id="buttons1"> <a href="http://go.joinhouse.party/download-iOS" target="_blank" class="button" id="app-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 381 26 32"><path d="M-270.3,398c0.1,4.9,4.2,6.5,4.3,6.5c-0.1,0.1-0.7,2.3-2.2,4.5c-1.3,2-2.7,3.9-4.9,3.9c-2.1,0.1-2.8-1.3-5.3-1.3s-3.2,1.2-5.2,1.3c-2.1,0.1-3.7-2.1-5-4.1c-2.7-3.9-4.9-11.2-2-16.1c1.4-2.5,3.9-3.9,6.6-4c2.1-0.1,4,1.4,5.3,1.4s3.6-1.7,6.1-1.5c1.1,0.1,4,0.4,5.8,3.2C-267,392-270.3,394-270.3,398 M-274.3,386.1c1.1-1.3,1.9-3.3,1.7-5.1c-1.6,0.1-3.6,1.1-4.7,2.4c-1,1.2-1.9,3.1-1.7,5C-277.3,388.5-275.4,387.5-274.3,386.1"/></svg> <div class="button-label" align="center"> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">App Store</span> </div> </a> <a href="http://go.joinhouse.party/download-play" target="_blank" class="button" id="play-store-button"> <svg class="button-logo" align="center" width="26" height="28" xmlns="http://www.w3.org/2000/svg" viewBox="-292 383 26 28"><path d="M-288.8,383.3l15.2,8.7l-3.4,3.5L-288.8,383.3L-288.8,383.3z M-291.9,383c0,0.2-0.1,0.3-0.1,0.5v26.9c0,0.2,0,0.4,0.1,0.5l13.5-14L-291.9,383L-291.9,383z M-271.8,400.9l5.1-2.9c1-0.6,1-1.5,0-2l-5.1-2.9l-3.8,3.9L-271.8,400.9L-271.8,400.9z M-273.6,402l-15.2,8.7l11.8-12.2L-273.6,402L-273.6,402z"/></svg> <div class="button-label" "align="center""> <span class="button-small-label" align="center">Download on the</span> <span class="button-big-label" align="center">Google Play</span> </div> </a> </div> </p> </a> </div> </div> </div> <!-- XS Button Set --> </header> <!-- Header --> <!--Un Needed Masthead Code --> <!-- <header id="masthead" class="site-header" role="banner"> <div class="container"> <div class="row"> <center> <div class="col-md-12 align-center"> <h1 class="header-title wow fadeIn <?php echo get_theme_mod( 'relia_logo_or_title', 'title' ) == 'title' ? '' : 'relia-hidden' ; ?>"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a> </h1> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( get_theme_mod( 'relia_header_logo', get_template_directory_uri() . '/inc/images/relia-logo.png' ) ); ?>" alt="<?php bloginfo( 'name' ); ?>" style="height: <?php echo esc_attr( get_theme_mod( 'relia_logo_size', 50 ) ); ?>px; width: auto;" class="header-logo wow fadeIn <?php echo get_theme_mod( 'relia_logo_or_title', 'title' ) == 'logo' ? '' : 'relia-hidden' ; ?>"></a> <p class="header-description wow fadeIn <?php echo get_theme_mod( 'relia_tagline_toggle', 'show' ) == 'show' ? '' : 'relia-hidden' ; ?>"> <?php bloginfo( 'description' ); ?> </p> <div class="search-and-cart fadeInRight <?php echo is_front_page() ? 'wow' : ''; ?>"> <?php if( class_exists( 'WooCommerce' ) && get_theme_mod( 'relia_shopping_cart_toggle', 'show') == 'show' ) : ?> <?php if( WC()->cart->get_cart_contents_count() > 0 ) : ?> <a class="relia-cart" href="<?php echo WC()->cart->get_cart_url() ; ?>"> <span class="cart-total"><?php _e( 'Items in Cart', 'relia' ); ?> : </span> <?php echo WC()->cart->get_cart_contents_count(); ?> </a> <?php endif; ?> <?php if( get_theme_mod( 'relia_search_toggle', 'show') == 'show' ) : ?> <i class="fa fa-search"></i> <?php endif; ?> <a href="<?php echo WC()->cart->get_cart_url() ; ?>"> <i class="fa fa-shopping-cart"></i> </a> <?php else : ?> <?php if( get_theme_mod( 'relia_search_toggle', 'show') == 'show' ) : ?> <i class="fa fa-search"></i> <?php endif; ?> <?php endif; ?> </div> </div></center> </div> </div> </section> <section id="search-background"> <div id="search-form" class="wow fadeInUp"> <?php get_search_form(); ?> </div> </section> <!-- <nav class="main-nav main-navigation"> <div class="container"> <?php if ( has_nav_menu( 'primary' ) ) : ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?> <?php else : ?> <div class="menu-testing-menu-container"> <ul id="primary-menu" class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom"> <a href="<?php echo admin_url( 'nav-menus.php' ); ?>"> <?php _e( '....', 'relia' ); ?> ? </a> </li> </ul> </div> <?php endif; ?> </div> </nav> --> </header><!-- #masthead --> <!--Un Needed Masthead Code --> <div id="content" class="site-content">
body{ background-color:white; color:#ccc; } .visible-sm{ margin: auto; border: 3px solid green; padding: 80px; } .visible-xs{ margin: auto; margin-right:50px; width: 50%; border: 3px solid green; }
/* * How to detect browser width * Ref: http://www.surfingsuccess.com/jquery/window-width.html#.Uw1RiV6Lfx4 */ $(window).ready(function() { var wi = $(window).width(); $("p.testp").text('Initial screen width is: ' + wi + 'px.'); $(window).resize(function() { var wi = $(window).width(); $("p.testp").text('Width is currently: ' + wi + 'px.'); }); });

Related: See More


Questions / Comments: