Title: iPad Sidebar layout
Last modified: August 20, 2016

---

# iPad Sidebar layout

 *  Resolved [MattCo](https://wordpress.org/support/users/mattco/)
 * (@mattco)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/)
 * [Site](http://msg.med.upenn.edu)
 * While the responsiveness works well on a desktop/laptop, Android and iPhone, 
   it doesn’t quite work correctly in Safari for iPad. Even on a large screen, all
   the sidebars end up moved (as they should) underneath the content area. However,
   unlike on the iPhone and others where the sidebars stay side by side underneath
   the content area ([http://db.tt/rNnlfofo](http://db.tt/rNnlfofo)), on the iPad
   they stack to the left, leaving tons of white space to the right. ([http://db.tt/xBkp6nAB](http://db.tt/xBkp6nAB))
 * I haven’t had the chance to look at the CSS too much, but does anyone know why
   this is happening? I love the theme and will be sticking with it so would like
   to fix this minor issue. Thanks for any assistance.

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

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/#post-3138715)
 * You may need to assign new CSS media queries styles that expand the width of 
   the sidebar on certain 960px width.
    E.g
 *     ```
       @media screen and (max-width: 960px){
        #sidebar-left {
         width: 50%;
        }
       }
       ```
   
 * If you’re doing this, then you may need to specify the original mobile phone 
   sidebar width again.
 *  [Gagan Goraya](https://wordpress.org/support/users/gagan-goraya/)
 * (@gagan-goraya)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/#post-3138769)
 * Ok, a precise solution here
 * In the css file [http://msg.med.upenn.edu/wp-content/themes/esplanade/style.css](http://msg.med.upenn.edu/wp-content/themes/esplanade/style.css)
 * From inside the `@media screen and (max-width: 960px) { ... }` block
 * cut the following code
 *     ```
       .content-sidebar-wrap,
       	#content,
       	.page-template-template-sidebar-content-sidebar-php .content-sidebar-wrap #content,
       	#sidebar,
       	#sidebar-right,
       	#sidebar-left {
       		float:none;
       		width:auto;
       	}
       ```
   
 * and paste it inside the `@media screen and (max-width: 640px) {...}` block. Put
   it before the existing code in this block.
 * It will get you rid of your worries 🙂
 *  [Emil Uzelac](https://wordpress.org/support/users/emiluzelac/)
 * (@emiluzelac)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/#post-3138793)
 * [@mattco](https://wordpress.org/support/users/mattco/) [@andrew](https://wordpress.org/support/users/andrew/)
   Nevins is correct, this can be adjusted with Media Queries and also see [http://themeid.com/responsive-grid/](http://themeid.com/responsive-grid/)
   if you need.
 * Thanks,
    Emil
 *  Thread Starter [MattCo](https://wordpress.org/support/users/mattco/)
 * (@mattco)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/#post-3138794)
 * Thanks for the info everyone! All set for now.
 *  [Emil Uzelac](https://wordpress.org/support/users/emiluzelac/)
 * (@emiluzelac)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/#post-3138795)
 * Thanks for using Responsive and please drop me a note when site is complete, 
   I would love to feature your design at [http://themeid.com/showcase](http://themeid.com/showcase)
 * Emil

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

The topic ‘iPad Sidebar layout’ is closed to new replies.

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

 * 5 replies
 * 4 participants
 * Last reply from: [Emil Uzelac](https://wordpress.org/support/users/emiluzelac/)
 * Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/ipad-sidebar-layout/#post-3138795)
 * Status: resolved