Ipad/Mobile View of blog

  • Unknown's avatar
    theshooglychair · Member ·

    Hi,

    I have been fiddling with little details on the blog (thanks to the help of the forummers here) and am very happy with how it looks. It also appears perfectly on an iPhone. However, the mini iPad is a bit scuttery. Where the entire space of the sidebar is moved downwards, as it should be, on the phone, it remains as so on the iPad. An empty side bar space is present, and the content shoved towards the right.

    I have been fiddling with CSS so that the spacing is to my liking on a computer screen, but it’s also proving a headache on the iPad. Is there any way I can rectify this? Ideally, it would just display as on the phone, with the sidebar widgets at the bottom, and the entire post occupying the space. Don’t know if I am making sense!

    Would greatly appreciate any help.

    Thanks.

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

  • Unknown's avatar
    hallluke · Member ·

    It looks like when you made the adjustments to the width of the sidebar and main content are you broke the layout for smaller screen sizes (like smartphones).

    I’m not sure how kindly the custom CSS editor takes to media queries but if you replace the CSS from the original stylesheet at the end of your custom code it will hopefully fix things. Try out the following and let me know how it goes:

    @media screen and ( max-width: 800px ) {
	.site-content,
	.sidebar-left .site-content,
	.site-main .widget-area,
	.sidebar-left .site-main .widget-area {
		clear: both;
		float: none;
		margin: 0 auto;
		width: 100%;
	}
}
  • Unknown's avatar
    theshooglychair · Member ·

    Whoa, that sorted it out perfectly!!! Thanks very much, appreciate it :D

  • The topic ‘Ipad/Mobile View of blog’ is closed to new replies.