Support » Theme: Esplanade » iPad Sidebar layout

  • Resolved MattCo

    (@mattco)


    Site

    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), on the iPad they stack to the left, leaving tons of white space to the right. (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)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    Ok, a precise solution here

    In the css file 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

    (@emiluzelac)

    Theme Review Admin

    @mattco @andrew Nevins is correct, this can be adjusted with Media Queries and also see http://themeid.com/responsive-grid/ if you need.

    Thanks,
    Emil

    Thanks for the info everyone! All set for now.

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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

    Emil

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘iPad Sidebar layout’ is closed to new replies.