Question 43655 in Html Question posted in
Some basic documentation can be found here.

Banner Image Zooms in on Mobile – Html

I have a static html page https://www.poggenamp.com with a mobile version. The mobile manner appears zoomed in, and I am not sure how to fix it. Checking through Chrome’s Inspector as well as my iPhone 13 Pro. I have added my CSS code that is applied to the banner and removed the rest.

@media only screen and (max-width: 1400px) {
    .container {
        max-width: 1140px
    }

    .banner:after {
        width: 100%;
    }
}

@media only screen and (max-width: 1199px) {
    .buttonmain {
        padding: 12px 10px;
        font-size: 14px;
    }

    .banner {
        padding: 60px 0 120px;
    }

    .banner .title {
        font-size: 36px;
        line-height: 44px;
    }

@media only screen and (max-width: 991px) {
    .banner .title {
        font-weight: 800;
        font-size: 30px;
        line-height: 38px;
    }

    @media only screen and (max-width: 767px) {
        .banner {
            padding: 60px 0 130px;
        }

        .banner:after {
            height: 100vh;
            width: 100%;
            background-size: cover;
            background: url(../images/MobileBannerPANG.jpg);
            opacity: 0.2;
            z-index: -10;
        }

        .banner:before {
            height: 50%;
            top: -50px;
        }
    }
Tags:

3

Answers


  1. 0

    I guess it’s something to do with background-size. instead cover, try contain,auto or other available options until you get what you want

    Login or Signup to reply.
  2. 0

    You are using two different images, below and over 1199px:

    > 1199px: https://www.poggenamp.com/images/BANNERPGC.jpg

    <= 1199px: https://www.poggenamp.com/images/MobileBannerPANG.jpg

    .banner:after {
    content: "";
    background: url(../images/BANNERPGC.jpg) center no-repeat;
    height: 50vh;
    background-size: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.2;
    z-index: -10;
}

    @media only screen and (max-width: 1199px) {
    /* ... */
    .banner:after {
        background-size: contain;
        background: url(../images/MobileBannerPANG.jpg);
    }
}

    Comparing the content of the two images, the displayed sizes of the items in the images differ at the switching point 1199px you get the scaling jump of the background.

    You also have a position jump when it switches.

    One possibility to solve this is to change the definition:

    .banner:after {
    content: "";
    /* background: url(../images/BANNERPGC.jpg) center no-repeat; */

    background-image: url(../images/BANNERPGC.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100vh;

    height: 50vh;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.2;
    z-index: -10;
}
/* ... */
@media only screen and (max-width: 1199px) {
    /* ... */
    .banner:after {
        background-size: auto 100vh;
        background: url(../images/MobileBannerPANG.jpg);
    }
}

    As the "mobile" edition of the picture is a centered crop of the horizontal edges (and scaled down) the center will fit both images at 1199px. – But the width of the mobile picture should get at least a width of 1199px.

    Login or Signup to reply.
  3. 0

    You are overriding background-size property by setting a background property right after. Use background-image instead.

    So instead of:

    .banner:after {
    background-size: contain;
    background: url(../images/MobileBannerPANG.jpg);
}

    Use:

    .banner:after {
    background-size: contain;
    background-image: url(../images/MobileBannerPANG.jpg);
}

    Do this for the ones in @media as well.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search