This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

iPad responsiveness in different orientations?

  • Creator
    Topic
  • #9511
    eklyx
    Member

    I’m probably missing something very simple but is there a setting to ensure that site is responsive in both orientations on iPad?
    On the theme demo if I turn the iPad to portrait from landscape the type size stays the same and line breaks are in different places – as expected. However, on our own site, when orientation is changed the type gets smaller and line breaks stay the same (i.e. page zooms out).
    Site is helenblair.net and problem is on particular pages – e.g. News, Exhibitions. Is it to do with widget to display image in sidebar, maybe?
    Any help appreciated.
    Thanks…Rob.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #9517
    Jason Bobich
    Keymaster

    Hello Rob,

    I’m not sure I totally follow. Right now nothing is zoomed in or out anywhere on your site that I can see. The way this works is the theme has different viewport break points for different device widths. The idea is as you go smaller, we make any needed adjustments at these selected break points. However, the viewport on an iPad in landscape is 1024px I believe, which means you’re viewing it at essentially the same size you would on a computer with the theme being about 960px wide.

    The theme’s first breakout is at 800px, which will happen just before the iPad in portrait (768px I believe). So, when you’re in iPad landscape, you’re just viewing your site naturally because the viewport is so wide.

    #9531
    eklyx
    Member

    Jason,

    Thanks for responding. To be honest I’m not sure I follow myself 🙂

    Maybe it’s just a coincidence but when I view the site on the iPad in landscape orientation and then turn it to portrait, the content just seems to get smaller and stay the same (i.e. looks like it just zoomed out). There are no changes in line breaks, etc. I suppose I expected the type to stay the same size as previously but in doing so to wrap at different line breaks since the viewport is narrower? See these two screenshots (please delete the link so it doesn’t hang around indefinitely):
    https://www.dropbox.com/sh/zx32q0612puneud/WdiNf1Yazk

    I’ve since looked at your demo site and our own on a desktop and, as you explained, after the break point around 800px the line breaks change all the way in to iPhone width where there seems to be another break point! Our site is obviously responsive!

    At the 800px point what happens? Is the page rendered exactly as it was but using a smaller typeface? At either side of the break point on your demo site, the content changes (different line breaks). On our site it doesn’t but maybe that’s just a coincidence?

    All the best…Rob

    #9542
    Jason Bobich
    Keymaster

    Yeah, not a lot happens at the 800px breakpoint. You can see everything that happens by just looking at the un-minified responsive.css file on your site:

    http://helenblair.net/wp-content/themes/akita/assets/css/responsive.css

    But on the demo (same as your site), it’s literally impossible for anything to be being triggered before the 800px breakpoint. There is no @media query that targets something between what the desktop user sees and the 800px point.

    http://www.themeblvd.com/demo/akita/wp-content/themes/akita/assets/css/responsive.css

    And you are totally free to make whatever customizations you like in terms of CSS.

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the overriding edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Here’s a sort of starting template you can use for your custom.css file.

    /* Desktops */
    .whatever {
    	...
    }
    .whatever-else {
    	...
    }
    
    /* iPad (landscape) */
    @media (max-width: 1024px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Tablets */
    @media (max-width: 800px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Mobile */
    @media (max-width: 480px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.