Title: Problems with mobile display
Last modified: August 21, 2016

---

# Problems with mobile display

 *  Resolved [wilmcclung](https://wordpress.org/support/users/wilmcclung/)
 * (@wilmcclung)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/)
 * I can’t seem to figure out how to display a list of products correctly when using
   mobile. On ipad and larger displays i have two products side by side, each with
   a pic and short description. However, using percentages in my css makes this 
   look horrible on anything the size of a phone.
 * You can see the problem with the mobile dispay at [http://www.duplex-pump.com/gaso](http://www.duplex-pump.com/gaso)
 *     ```
       <style><!--
       .specialNote { margin:0px; font-size:10px; font-style:italic; text-align:center; }
       .leftDiv1 {float: left; width: 20%; margin-right: 10px;}
       .leftDiv2 {float: left; width: 25%; margin-right: 30px;}
       .rightDiv1 {float: left; width: 20%; margin-right: 10px;}
       .rightDiv2 {float: left; width: 25%; margin-right: 0px;} --!>
       </style>
       ```
   

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614392)
 * Link not working
 *  Thread Starter [wilmcclung](https://wordpress.org/support/users/wilmcclung/)
 * (@wilmcclung)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614429)
 * The link works fine for me, [http://www.duplex-pump.com](http://www.duplex-pump.com)
   is the main page, I have trouble with everything under the products menu.
    I’ve
   tried several plugins for mobile and don’t like them very much. Is there a way
   to have seperate css if someone is using mobile?
 * Thanks very much for you time.
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614430)
 * Certainly is. You need to understand [Child Theme](http://www.themesandco.com/snippet/creating-child-theme-customizr/)
   and [@media](http://www.themesandco.com/snippet/media-queries-responsiveness/)
 * No need to use plugins
 *  Thread Starter [wilmcclung](https://wordpress.org/support/users/wilmcclung/)
 * (@wilmcclung)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614435)
 * Thanks very much, it looks a little daunting but I think I can get that done.
   You have been a big help.
 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614455)
 * Rather than reinvent the wheels, I think that you need to use the underlying 
   [bootstrap scaffolding](http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem)(
   built-in to Customizr) to display your image and text combinations. That way,
   the responsiveness will be guaranteed at all screen sizes.
 * As well as the link above, take a look at Nikeo’s explanation [here](http://www.themesandco.com/snippet/creating-a-column-layout-in-customizr/).
 * Add the following to a wordpress page, save as a draft and preview it. This will
   show you the power of the underlying scaffolding that is there for the taking
   if you want to use it.
 * I have deliberately included inline styles so that you can see what’s happening.
   Once you publish, you can remove these, of course.
 *     ```
       <style>
       .my-bootstrap-grid {
         margin-top: 10px;
         margin-bottom: 20px;
       }
       .my-bootstrap-grid [class*="span"] {
         background-color: #eee;
         text-align: center;
         -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
                 border-radius: 3px;
         min-height: 20px;
         line-height: 20px;
       }
       .my-bootstrap-grid [class*="span"]:hover {
         background-color: #ddd;
       }
       .my-bootstrap-grid .show-grid {
         margin-top: 0;
         margin-bottom: 0;
       }
       .my-bootstrap-grid .show-grid [class*="span"] {
         margin-top: 5px;
       }
       .my-bootstrap-grid [class*="span"] [class*="span"] {
         background-color: #ccc;
       }
       .my-bootstrap-grid [class*="span"] [class*="span"] [class*="span"] {
         background-color: #999;
       }
   
       </style>
       <h3>4 x span3 example:</h3>
       <p>This example shows how to add 4 separate grid elements. When they "flow" on smaller screens, each element will stack on top of the others equally.</p>
       <div class="row-fluid my-bootstrap-grid">
   
           <div class="span3">
                   Add IMG1 here
           </div>
   
           <div class="span3">
                   Add TEXT1 (related to IMG1) here
           </div>
   
           <div class="span3">
                   Add IMG2 here
           </div>
   
           <div class="span3">
                   Add TEXT2 (related to IMG1) here
           </div>
       </div>
       </br>
       </br>
       <h3>2 x span6 (each containing 2x span6) example:</h3>
       <p>This example shows how to add 4 grid elements, as above, but in 2 groups of element-pairs. When they "flow" on smaller screens, they will stack nicely as above, but in addition the element-pairs will be closer together.</p>
   
       <div class="row-fluid my-bootstrap-grid">
   
           <div class="span6">
   
               <div class="row-fluid my-bootstrap-grid">
   
                   <div class="span6">
                   Add IMG1 here
                   </div>
   
                   <div class="span6">
                   Add TEXT1 (related to IMG1) here
                   </div>
   
               </div>
           </div>
   
           <div class="span6">
   
               <div class="row-fluid my-bootstrap-grid">
   
                   <div class="span6">
                   Add IMG2 here
                   </div>
   
                   <div class="span6">
                   Add TEXT2 (related to IMG2) here
                   </div>
   
               </div>
           </div>
   
       </div>
   
       <p><strong>A note about the shading:</strong> The shading is added for illustration purposes. However, you may wish to leave it in if you want to group items on the page. To do this, remove all the CSS inside the style tags above and place them in your child theme's style.css, or in the Custom CSS panel of Customiz'it.</p>
       ```
   
 * Words of warning:
    – You need a separate `<div class="row-fluid my-bootstrap-
   grid">...</div>` block for each row of content. In your case, this translates
   to each row of 2 images / 2 text blocks. – While your product page is a perfect
   candidate for the scaffolding, you need to be **_scrupulous_** about commenting
   your html / maintaining indents. One deleted `<div>` in a page like yours and
   you’ll be tearing your hair out trying to find what’s wrong. I recommend a good
   html editor with a cut and paste into the WordPress edit screens, rather than
   editing directly in WordPress.
 * Let us know how you get on.
 *  Thread Starter [wilmcclung](https://wordpress.org/support/users/wilmcclung/)
 * (@wilmcclung)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614487)
 * I really appreciate that ElectricFeet. This works great too.
 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614532)
 * Glad to help 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Problems with mobile display’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [formatting](https://wordpress.org/support/topic-tag/formatting/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 7 replies
 * 3 participants
 * Last reply from: [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/problems-with-mobile-display/#post-4614532)
 * Status: resolved