WordPress.org

Ready to get started?Download WordPress

Forums

Esplanade
[resolved] iPad Sidebar layout (6 posts)

  1. MattCo
    Member
    Posted 1 year ago #

    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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. Gagan Goraya
    Member
    Posted 1 year ago #

    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 :)

  4. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    @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

  5. MattCo
    Member
    Posted 1 year ago #

    Thanks for the info everyone! All set for now.

  6. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic