Css 减少移动设备上按钮和图像之间的间距

我在这个网站上提供了两个图像，一个用于大屏幕，另一个用于移动设备：

（以防您需要另一个css类）

移动设备的图像远低于预期。我可以用：

top:-40px但这会在绿色横幅和图像之间产生间隙

CSS类：

.my_home_banner_image {
         bottom: 0;
         top: 0;
         position: relative;
         z-index: 0;
         width: 100%;
         display: block;
         margin-right: auto;
         margin-left: 0px;
 }

差距：

.my_home_banner_image {
         bottom: 0;
         top: 0;
         position: relative;
         z-index: 0;
         width: 100%;
         display: block;
         margin-right: auto;
         margin-left: 0px;
 }


我想：

1） 使图像以40像素的速度靠近橙色按钮。

2） 在蓝色和橙色按钮之间留出更多空间（额外）。

完成MediaQuery：

@media (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: 100%;
        display: block;
        margin-right: auto;
        margin-left: 0px;
    }


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


}

Codepen

我建议不要使用

元素进行布局。

有关参考，请参阅：




注意：不要使用

在段落之间创建边距；将它们包装在
元素中，并使用CSS margin属性控制它们的大小

我已删除它们并调整了按钮元素的边距。

请注意，由于介质查询，必须以480px或更小的宽度查看更改


@介质（最大宽度：480px）{
.col-md-6.btn{
利润底部：10%；
}
.col-md-6：最后一个孩子{
页边距底部：0；
}
}













贴纸

Fácil de ordenar por internet.
Envíos a todo elú
我建议不要使用

元素进行布局。

有关参考，请参阅：




注意：不要使用

在段落之间创建边距；将它们包装在
元素中，并使用CSS margin属性控制它们的大小

我已删除它们并调整了按钮元素的边距。

请注意，由于介质查询，必须以480px或更小的宽度查看更改


@介质（最大宽度：480px）{
.col-md-6.btn{
利润底部：10%；
}
.col-md-6：最后一个孩子{
页边距底部：0；
}
}













贴纸

Fácil de ordenar por internet.
Envíos a todo elú
我为您提供了一种新的结构。
1） 更改标记：

旧标签：

<div class="container-fluid my_home_banner my_header_bg_color">
    <div class="row">
        <div class="col-md-6 my_home_banner-left">
            <br>
            <br>
            <div class="my_home_banner_left">

                <div class="my_home_banner_lef_text">
                    <p class="my_home_banner_title">Stickers Personalizados</p>
                    <p class="my_home_banner_subtitle my_title"><b>Fácil de ordenar por internet.</b> <br><b> Envíos a todo el Perú.</b></p>
                </div>
                <div class="row ">
                    <div class="col-md-6">
                        <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
                    </div>
                    <br>
                    <div class="col-md-6">
                        <a href="/muestras/"
                           class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
                    </div>
                </div>
            </div>
            <br>
            <br>
        </div>
        <div class="col-md-6">
            <picture>
                <source media="(max-width: 480px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_mobiles.png">
                <source media="(max-width: 2056px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
                <img class="my_home_banner_image" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
            </picture>
        </div>
    </div>
</div>

工作方法：
.homebanner{
背景图片：url(https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png);
宽度：100%；
身高：100%；
背景重复：无重复；
背景大小：50%；
背景位置：100%100%；
}
@介质（最大宽度：1280px）{
霍姆班纳先生{
背景大小：75%；
}
}
@介质（最大宽度：991px）{
霍姆班纳先生{
背景大小：100%；
}
}
@介质（最大宽度：767px）{
霍姆班纳先生{
垫底：36%；
背景大小：80%；
背景位置：50%100%；
}
}
@介质（最大宽度：667px）{
霍姆班纳先生{
垫底：39%；
背景大小：90%；
背景位置：50%100%；
}
}
@介质（最大宽度：480px）{
霍姆班纳先生{
垫底：49%；
背景大小：100%；
背景位置：50%94%；
}
}

加利托贴纸


















贴纸

Fácil de ordenar por internet<我们要做的事






我为您提供了一种新的结构。
1） 更改标记：

旧标签：

<div class="container-fluid my_home_banner my_header_bg_color">
    <div class="row">
        <div class="col-md-6 my_home_banner-left">
            <br>
            <br>
            <div class="my_home_banner_left">

                <div class="my_home_banner_lef_text">
                    <p class="my_home_banner_title">Stickers Personalizados</p>
                    <p class="my_home_banner_subtitle my_title"><b>Fácil de ordenar por internet.</b> <br><b> Envíos a todo el Perú.</b></p>
                </div>
                <div class="row ">
                    <div class="col-md-6">
                        <a href="stickers" class="my_home_buttons btn btn-azul text-white btn-block">Comprar</a>
                    </div>
                    <br>
                    <div class="col-md-6">
                        <a href="/muestras/"
                           class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
                    </div>
                </div>
            </div>
            <br>
            <br>
        </div>
        <div class="col-md-6">
            <picture>
                <source media="(max-width: 480px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_mobiles.png">
                <source media="(max-width: 2056px)" srcset="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
                <img class="my_home_banner_image" src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png">
            </picture>
        </div>
    </div>
</div>

工作方法：
.homebanner{
背景图片：url(https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png);
宽度：100%；
身高：100%；
背景重复：无重复；
背景大小：50%；
背景位置：100%100%；
}
@介质（最大宽度：1280px）{
霍姆班纳先生{
背景大小：75%；
}
}
@介质（最大宽度：991px）{
霍姆班纳先生{
背景大小：100%；
}
}
@介质（最大宽度：767px）{
霍姆班纳先生{
垫底：36%；
背景大小：80%；
背景位置：50%100%；
}
}
@介质（最大-