Mobile responsive not working on ipad mini

[SelenaD]

Hello Genesis geniuses, I need some help. This site has been designed using media queries, and I've used responsivepx.com to test it at multiple sizes. By 768 pixels wide the sidebar should drop down and be centered below the now full width content. This works fine in all of my tests, but when it is viewed on an actual ipad mini it isn't working. It's almost as if it isn't seeing the media queries.

I have added the viewport meta tag to my functions file and everything looks good on my Android devices.

Thanks in advance for any help you guys can give me.

Selena

http://174.120.83.8/~project/what-it-does/

[AnitaC]

You probably need to use the device as your measuring tool and tweak the media queries and continue to view it on your the iPad mini. I know this works for me when I have mobile device issues. Using the simulators aren't as reliable sometimes.

---

Need help with customization or troubleshooting? Reach out to me.

[SelenaD]

Right - but the ipad mini reports as 768px wide and this site goes full width at 860px, so it isn't a matter of being off by a few pixels. It's like the mini isn't even registering the media queries or something. 🙁

[AnitaC]

You can add whatever configurations you want. When they develop the themes, they do their best to add in media queries of what I guess are the frequently used devices. They don't add every single device. So you can add in your own and make the adjustments as you see them.

---

Need help with customization or troubleshooting? Reach out to me.

[SelenaD]

Thanks, I HAVE added my own. This is a fully developed custom child theme. I know what the queries are and where they break because I put them there. What I can't figure out is why on earth they aren't picking up on the mini.

[AnitaC]

What do you have as your code? Can you place it here?

---

Need help with customization or troubleshooting? Reach out to me.

[SelenaD]

You can see the whole stylesheet at the link, but here is what starts at media query for 860px:

@media only screen and (max-width: 860px) {
    
    .wrap,
	#footer .creds,
	#footer .copyright,
	#header .widget-area,
	#inner,
	#wrap #content,
	#wrap #content-sidebar-wrap,
	#wrap #sidebar-alt {
		width: 98%;
	}

	.genesis-nav-menu li,
	#footer .creds,
	#footer .copyright,
	#header ul.genesis-nav-menu,
	#header .search-form {
		float: none;
	}
	
	.genesis-nav-menu,
	#description,
	#footer .creds,
	#footer .copyright,
	#header .search-form,
	#title,
	#title-area {
		text-align: center;
	}
	
	.sidebar {
	    clear: both;
	    display: block;
	    float: none;
	    margin: 0 auto;
	}
    
    #title-area {
        margin: 0 auto;
    }
    
    #header .widget-area {
        float: none;
        margin: 0 auto;
	}
	
	.genesis-nav-menu {
        margin: 10px auto;
    }
    
    .header-image #title,
    .header-image #title a,
    .header-image #title-area {
        float: none;
    }
}

/* iPads (portrait) ----------- */

@media only screen and (max-width: 768px) {

	.genesis-nav-menu a {
		padding: 0px 16px;
		padding: 0rem 1rem;
	}

	#title {
		margin: 16px 0;
		margin: 1rem 0;
	}

	#header .search-form {
		margin: 32px auto 0;
		margin: 2rem auto 0;
		width: 50%;
	}

	.genesis-nav-menu li.right {
		display: none;
	}
	
	#text-5 {
	    text-align: center;
	    width: 100%;
	}
	
	#text-6 {
	    display: none;
	}

	#footer .wrap {
		padding: 24px 0;
		padding: 1.5rem 0;
	}

	.footer-widgets-1,
	#header .genesis-nav-menu {
		margin: 0;
	}
}

@media only screen and (max-width: 600px) {
 
    .footer-widgets-1,
    .footer-widgets-2 {
        display: block;
        float: none; 
        margin: 0 auto;
        width: 320px;  
    }   
}

/* iPhones (portrait and landscape) ----------- */

@media only screen and (max-width: 480px) {

	html {
		font-size: 87.5%; /* 14px base */
	}
	
	h1,
	.entry-title {
		font-size: 42px;
		font-size: 3rem;
	}
	
	h3 {
		font-size: 28px;
		font-size: 2rem;
	}	

	#header .search-form {
		width: 100%;
	}
	
	.home h1 {
	    font-size: 36px;
	}
	
	#protractor {
	    display: none;
	}
	
	#subcontractor-text {
	    margin: 20px;
	}

	.archive-page {
		margin: 0;
		width: 100%;
	}
	
	.learn-more-btn {
        display: none;
    }
    
    .learn-more-btn-small {
        background: url(images/learn-more-button-small.jpg) no-repeat;
        display: block visible;
        height: 30px;
        margin: 10px auto 0;
        width: 315px;
    }
    
    .learn-more-btn-small a {
       color: #fff;
       display: block;
       font-size: 18px;
       font-size: 1.125rem;
       font-weight: 600;
       padding: 8px 0 0 90px;
    }

    .learn-more-btn-small a:hover {
        text-decoration: none;
    }
    
    .learn-more-btn-small:hover {
        background-position: 0 -30px;
    }
}

@media only screen and (max-width: 320px) {
    
    .home h1 {
        font-size: 30px;
    }
    
    .sidebar {
        width: 315px;

    }
    
    #demo-button {
        background: url(images/free-demo-button-small.jpg);
        height: 40px;
    }    

    #demo-button:hover {
        background-position: 0 -40px;
    }
    
    
}
        

[AnitaC]

I did a Google search. Look at this and see if it helps you - http://stackoverflow.com/questions/16262542/ipad-mini-specfic-css-media-queries.

---

Need help with customization or troubleshooting? Reach out to me.

[SelenaD]

Unfortunately not. And even if it did, then it would mess up my media queries on other devices that were NOT at that pixel density. So frustrating.

[AnitaC]

Are you using both min-width and max-width. I've found that if you use these it doesn't effect them all.

---

Need help with customization or troubleshooting? Reach out to me.

[SelenaD]

Oh heavens - I found it. I was missing a closing bracket on a media query. Banging my head on my desk now as I feel like a total and complete idiot.

Thank you for trying to help me!

[AnitaC]

Girl... it happens to the best of us!!! Glad you found it! I'll close this now.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts