CODEWITHSUNDEEP
css
Omar Gonzales
Omar Gonzales

Reputation: 4008

banner image loads with bigger size on mobile devices

I'm using: https://ready.mobi for testing my website for all devices. I'm interested in correctly set the image on the header for the index. Right now the image is not looking great in all devices. Also the blue and orange buttons are too close to each other, and the image appears too big (you have to scroll to see it).

Current result:

I've set media queries to handle this. Apparently they are not working well.

https://ready.mobi/#1164495-2wd6 (enter here to check the site on different devices online)

enter image description here

Desired result:

https://ready.mobi/#1164490-t8g2 (enter here to check the site on different devices online)

enter image description here

Codepen: https://codepen.io/anon/pen/EzOONJ

.my_header_bg_color {

    /*background-color: #4FB99F;*/
    /*background-color: #00ADB5;*/
    /*background-color: #6BB983;*/
    background-color: #00AD80;

}

/* Standard media queries breakpoints */

@media (min-width: 320px) and (max-width: 480px) {
    /* smartphones, iPhone, portrait 480x320 phones */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }

    .productos_finales_home img {

        padding-bottom: 15px;
    }


    .my_home_banner_image {

        bottom: 0;
        top: 0;
        position: relative;
        z-index: 0;
        width: 60%;
        display: block;
        margin-right: auto;
        margin-left: 165px;
    }

    /*.my_home_banner_image {*/
    /*display: none;*/
    /*}*/
    .my_home_banner_title {
        color: white;
        font-size: 36px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }



    .btn-comentario {
        text-decoration: none;
        background-color: #969696;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        color: #fff;
        font-weight: 700;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
        letter-spacing: 0;
        line-height: 1.2;
        -webkit-font-smoothing: antialiased;
        -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        -ms-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        -o-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, .09) 0%, rgba(0, 0, 0, .09) 100%);
        font-size: 1.4rem;
        padding: 22px 30px;
        border-radius: 6px;
        border: none;
    }


.my_home_banner_left {
    margin-left: 10px;
    z-index: 100;
}

.stickers_referenciales {
    margin-bottom: 5px;
}


}

@media (min-width: 481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }


    .my_home_banner_image {

        bottom: 0;
        position: absolute;
        right: -0px;
        bottom: 0;
        z-index: 0;
        width: 40%;
        display: block;
        margin-right: auto;
        margin-left: 185px;
    }


    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }

    .btn-comentario {
        margin-bottom: 100px;
    }

    .my_home_banner_left {
        margin-left: 20px;
        z-index: 100;
    }

}

@media (min-width: 641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }


    .my_home_banner_image {

        bottom: 0;
        position: absolute;
        right: -0px;
        bottom: 0;
        z-index: 0;
        width: 70%;
    }


    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }

    .btn-comentario {
        margin-bottom: 100px;
    }

    .my_home_banner_left {
        margin-left: 20px;
        z-index: 100;
    }

    .my_home_banner_lef_text {
        margin-left: 10px;
        z-index: 100;
    }

}

@media (min-width: 961px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }


    .my_home_banner_image {

        bottom: 0;
        position: absolute;
        right: -0px;
        bottom: 0;
        z-index: 0;
        width: 60%;
    }


    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }

    .btn-comentario {
        margin-bottom: 100px;
    }

    .my_home_banner_left {
        margin-left: 20px;
        z-index: 100;
    }

}

@media (min-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }


    .my_home_banner_image {

        bottom: 0;
        position: absolute;
        right: -0px;
        bottom: 0;
        z-index: 0;
        width: 55%;
    }


    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }

    .btn-comentario {
        margin-bottom: 100px;
    }

    .my_home_banner_left {
        margin-left: 20px;
        z-index: 100;
    }

    .subscribe_field {
        width: 350px;
    }

}

@media (min-width: 1281px) {
    /* hi-res laptops and desktops */
    .my_home_banner {
        bottom: 0;
        margin-right: 8%;
        z-index: -600;
    }


    .my_home_banner_image {

        bottom: 0;
        position: absolute;
        right: -0px;
        bottom: 0;
        z-index: 0;
        width: 50%;
    }

    /*.my_home_banner_image_left {*/
    /*display: none;*/
    /*}*/
    .my_home_banner_title {
        color: white;
        font-size: 50px;
        font-weight: bold;
    }

    .my_home_banner_subtitle {
        margin-top: 0%;
        padding-top: 0%;
    }

    .btn, h2, p {
        margin-bottom: 10px;
    }

    .btn-comentario {
        margin-bottom: 100px;
    }

    .my_home_banner_left {
        margin-left: 20px;
        z-index: 100;
    }

    .subscribe_field {
        width: 350px;
    }
}


.center-video {
    margin: 0 auto;
    width: 400px;
}

Upvotes: 0

Views: 482

Answers (2)

Fabio S
Fabio S

Reputation: 1122

Write this:

@media (max-width: 480px) {

in place of:

@media (min-width: 320px) and (max-width: 480px) {

Upvotes: 1

Adina E
Adina E

Reputation: 141

In the html, you can specify different images for different size devices:

<picture>
   <source media="(max-width: 480px)" srcset="yoursourceMobile.jpg">
   <source media="(max-width: 2056px)" srcset="yoursource.jpg">
   <img src="yoursource.jpg">
</picture>

Upvotes: 0

Related Questions