[Support request] Page specific css @media and iphone portrait view

Home Forums Support [Support request] Page specific css @media and iphone portrait view

Home Forums Support Page specific css @media and iphone portrait view

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #244984
    Craig

    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

    #245024
    Tom
    Lead Developer
    Lead Developer

    I believe it’s caused by this in your CSS:

    background-size: 100% 100%;

    Try replacing it with:

    background-size: cover;
    background-position: center center;
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.