CODEWITHSUNDEEP
css
Omar Gonzales
Omar Gonzales

Reputation: 4008

Reduce spacing between buttons and image on mobile devices

I'm serving 2 images, one for big screens and other for mobile devices on this site:

stickersgallito.pe (In case you need another css class)

The image for mobile devices is way down than desired. I can make the image go up with: top: -40px; but this generates a gap between the green banner and the image.

CSS class:

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

Gap:

enter image description here

I'd like to:
1) get the image closer to the orange button by 40px.
2) make more space between blue and orange buttons (BONUS).

Complete 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

https://codepen.io/anon/pen/mYaRKO

Upvotes: 0

Views: 680

Answers (2)

Vladimir Rodichev
Vladimir Rodichev

Reputation: 361

I offer you a new structure. 1) Change the tags:

old tags:

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

NEW:

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

Working method: 

.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="/">&emsp;&emsp;<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>
It remains only to edit it.

Heading

Upvotes: 1

showdev
showdev

Reputation: 29168

I recommend not using <br> elements for layout purposes.
For reference, see:

  1. Why isn't the HTML break tag acceptable anymore for top and bottom margins?
  2. Is it sometimes bad to use <BR />?
  3. <br>: The Line Break element .

Note: Do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the CSS margin property to control their size.

I've removed them and adjusted the margins of the button elements.
Note that the changes must be viewed at width of 480px or less due to the media query.

@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="/">&emsp;&emsp;<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>

Upvotes: 1

Related Questions