Support » Theme: Adler » Urgent: Huge problems on iPad Chrome/Safari

  • Resolved Kenny

    (@puns0steel)



    Featured images aren’t loading and every page is super long on my iPad mini in Chrome and Safari. Error is on my client site and also the Adler demo site at https://pixelgrade.com/demos/adler/.

    Instead of the featured image, I get a huge block of white space..about 4 full pages of it before I hit my content. Maybe it’s a buggy window detect or height detect issue?

    This is bad news since I’m supposed to launch my client’s site in two days. Any suggestions for a fix?

    Kenny

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi there,

    I just tested it on an iPad with iOS 8.2, both Chrome and Safari seem to be working fine.

    Can you tell me perhaps the version of iOS on which the iPad mini is running on ?

    Thanks,
    Robert

    Thanks for responding. I’m using iOS 7.1.2.

    10% of iOS users still have iOS 7. But if that’s the issue, then I guess I can live with it. Unless you have a fix handy.

    Thanks!
    Kenny

    We’re going to have a look at the problem and try to fit it in the next updates.

    Thanks,
    Robert

    Thanks Robert. Sounds reasonable.

    While you’re at it, I also noticed an issue where I’m using three footer widgets. On mobile iPhone, those footer widgets completely visually overlap instead of clearing each other.

    I threw a media query, a flexbox, and a clearfix at them to resolve the issue:

    @media screen and (max-width: 740px) {
    	.widgets-area .widget-area,
    	.widgets-area .widget-area .widget {
    		display:block;
    	}
    	.widgets-area .widget-area .widget {
    		-webkit-flex-basis: inherit;
    		-ms-flex: 0 1 inherit;
    		flex-basis: inherit;
    	}
    	.widgets-area .widget-area .widget:after {
    		display: table;
    		clear: both;
    		content: '';
    	}
    }

    And the logo area in the header was too small on mobile, causing my relatively short text title to line wrap. So I added this, since I didn’t see why the mobile toggle needed 80% of the width:

    @media screen and (max-width: 900px) {
    	.site-branding,
    	.main-navigation {
    		width:50%;
    	}
    }

    There are some other smaller overlapping text issues on mobile, but I didn’t bother fixing them.

    Thanks for the theme! We’re loving it.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Urgent: Huge problems on iPad Chrome/Safari’ is closed to new replies.