Hello Support, thank you in advance if anyone can help me with this quagmire, what am I doing wrong:
URL: http://www.huntgintinglearninghelps.com/testing
Renders fine for me in iphone 6 landscape, a bunch of android/chrome browsers. But, in straight up iphone portrait, the image gets quashed, the image really quashes up. Here are details:
smaller image file: 640 × 568
larger image file: 920 x 568
page specific css with an @media query:
.page-id-254 {
background-image: url("http://huntingtonlearninghelps.com/wp-content/uploads/2016/11/form_satprepLargeImage.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
@media only screen and (min-width: 320px) and (max-width: 667px) {
.page-id-254 {
background-image: url("http://huntingtonlearninghelps.com/wp-content/uploads/2016/11/form_satprepSmallImage.png");
overflow-x:hidden;
}
}
.pagebreak_social {
background-color:#3ea085;
border: none;
height: auto;
text-align: center;
width: 100%;
padding-top:15px;
padding-bottom:10px;
}
Fairly stumped on this, I’m no css whiz, but I’ve got it looking close to how I need.
Thank you, and as I always say, this theme is 110%!
Richard