Visual theme: force widgets to display on an iPad

• 

  nilla2014 · Member · Jul 29, 2016 at 10:27 am

  • Copy link
  • Add topic to favorites

  Hi,

  Is there any way I can force widgets in my sites sidebar to display when an iPad is held as portrait? Currently, in landscape everything displays correctly; however, when in portrait, the sidebar displays at the bottom of my post (although there’s room next to my post).

  Many thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Jul 29, 2016 at 12:27 pm

  • Copy link

  You can target different screen sizes and devices with media queries.

  At the moment your main content takes up only about 70% of the width of the screen on tiny mobiles and your sidebar is basically unreadable. This is the perfect place to use media queries. In fact your theme does this already – if you turn off your custom styles the mobile and tablet views get full width content and the sidebar re-appears at the side on larger screens.

  Consider wrapping your custom styles for the main content and widget are in code like this instead:

  @media only screen and (min-width: 769px) {
  	.site-content {
  		margin:0 29.9% 0 0;
  	}
  	.site-main .widget-area {
  		width:26.7%;
  		float: right;
  		clear: none;
  	}
  }

  I’ve added in some extra rules that look like they’ll help too. Let me know what you think.

• 

  nilla2014 · Member · Jul 29, 2016 at 4:08 pm

  • Copy link

  Many thanks!

  I’ve saved this code in my CSS and tested in my iPad but nothing has changed in portrait – still displays widgets at bottom of post.

• 

  hallluke · Member · Jul 29, 2016 at 4:15 pm

  • Copy link

  Oh yeah, that’s because I’m inattentive and thought you meant landscape and not portrait. Try changing the min-width value to 767px (this puts it just below the iPad screen resolution instead of just above).

• 

  nilla2014 · Member · Jul 29, 2016 at 5:00 pm

  • Copy link

  Fantastic that worked! Thanks again :-)

• 

  nilla2014 · Member · Jul 29, 2016 at 5:13 pm

  • Copy link

  I’d like to add that although the widgets now display on a physical iPad, when clicking the preview button at the bottom of the Customizer screen, the widgets still display at the bottom of post.

  As long as it displays for my audience correctly, then I can live with the Admin tool inconsistency.