减少移动设备上按钮和图像之间的间距
我正在提供2张图片，其中一张用于大屏幕，另一张用于移动设备：
stickersgallito.pe（如果您需要另一个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;
}
差距：
我要：
1）将图片距离橙色按钮更近40px。
2）在蓝色和橙色按钮（BONUS）之间留出更多空间。
完成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
2 个答案:
答案 0 :(得分：1)
我建议不要将<br>元素用于布局。
供参考，请参见：
- Why isn't the HTML break tag acceptable anymore for top and bottom margins?
- Is it sometimes bad to use
<BR />? -
<br>: The Line Break element 。
注意：请勿使用
<br>在段落之间创建边距；将它们包装在<p>元素中，并使用CSS margin属性控制它们的大小。
我已删除它们并调整了按钮元素的边距。
请注意，由于媒体查询的原因，更改必须以480px或更小的宽度查看。
@media (max-width: 480px) {
.col-md-6 .btn {
margin-bottom: 10%;
}
.col-md-6:last-child .btn {
margin-bottom: 0;
}
}<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/custom.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/navbar.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/header.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/preloader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/loader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/footer.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/size-quantity-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="general-container"></div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="/">  <img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/stickers_gallito_logo.png" width="20px" height="30px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart" style="color:white !important;"></i> ( 0)</a>
</li>
<li class="nav-item active">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user-circle"></i> ogonzales</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="/ordenes/historial_de_compras/" class="dropdown-item">Historial de compras</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/salir/">Salir <i class="fas fa-sign-out-alt"></i></a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid my_home_banner my_header_bg_color">
<div class="row">
<div class="col-md-6 my_home_banner-left">
<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>
<div class="col-md-6">
<a href="/muestras/" class="my_home_buttons btn btn-naranja text-white btn-block">Muestras</a>
</div>
</div>
</div>
</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>
答案 1 :(得分：1)
我为您提供了一个新的结构。 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>
新：
<div class="container-fluid my_home_banner my_header_bg_color homebanner">
<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>
</div>
2）CSS：
.homebanner {
background-image: url(https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 50%;
background-position: 100% 100%;
}
@media (max-width: 1280px) {
.homebanner {
background-size: 75%;
}
}
@media (max-width: 991px) {
.homebanner {
background-size: 100%;
}
}
@media (max-width: 767px) {
.homebanner {
padding-bottom: 36%;
background-size: 80%;
background-position: 50% 100%;
}
}
@media (max-width: 667px) {
.homebanner {
padding-bottom: 39%;
background-size: 90%;
background-position: 50% 100%;
}
}
@media (max-width: 480px) {
.homebanner {
padding-bottom: 49%;
background-size: 100%;
background-position: 50% 94%;
}
}
工作方法：
.homebanner {
background-image: url(https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/home/banner_home_lion.png);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 50%;
background-position: 100% 100%;
}
@media (max-width: 1280px) {
.homebanner {
background-size: 75%;
}
}
@media (max-width: 991px) {
.homebanner {
background-size: 100%;
}
}
@media (max-width: 767px) {
.homebanner {
padding-bottom: 36%;
background-size: 80%;
background-position: 50% 100%;
}
}
@media (max-width: 667px) {
.homebanner {
padding-bottom: 39%;
background-size: 90%;
background-position: 50% 100%;
}
}
@media (max-width: 480px) {
.homebanner {
padding-bottom: 49%;
background-size: 100%;
background-position: 50% 94%;
}
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Stickers Gallito Perú">
<meta name="google-site-verification" content="fGkwUY2RcijkVzB6DiwIuAToP1y5xw8ECXQQabRAOIM" />
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/custom.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/home.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/navbar.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/header.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/preloader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/loader.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/footer.css">
<link rel="stylesheet" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/css/size-quantity-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/gallito_favicon.png" />
<title>Stickers Gallito</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPXWL88"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="general-container">
</div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<a class="navbar-brand" href="/">  <img src="https://stickers-gallito-uploaded-files.s3.amazonaws.com/static/img/stickers_gallito_logo.png" width="20px" height="30px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/stickers">Stickers <span class="sr-only">(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/carrito_de_compras/"><i class="fas fa-shopping-cart"
style="color:white !important;"></i> ( 0)</a>
</li>
<li class="nav-item active">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user-circle"></i> ogonzales</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="/ordenes/historial_de_compras/" class="dropdown-item">Historial de compras</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/salir/">Salir <i class="fas fa-sign-out-alt"></i></a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container-fluid my_home_banner my_header_bg_color homebanner">
<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>
</div>
标题
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？