CODEWITHSUNDEEP
htmlcssmobile-websitestatic-pages
Param
Param

Reputation: 13

Banner Image Zooms in on Mobile

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;
        }
    }

Upvotes: 1

Views: 241

Answers (3)

Douwe Pausma
Douwe Pausma

Reputation: 38

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.

Upvotes: 0

dodrg
dodrg

Reputation: 1211

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.

Upvotes: 0

Sasitha
Sasitha

Reputation: 23

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

Upvotes: 0

Related Questions