Как переместить основной контент дальше вниз по странице, когда он переключается на мобильный дизайн? - PullRequest
Новая
       2

Как переместить основной контент дальше вниз по странице, когда он переключается на мобильный дизайн?

0 голосов
/ 19 февраля 2020

Когда мой веб-сайт переходит на 850 пикселей, он переключается на мобильный дизайн, проблема заключается в том, что у меня есть кнопка, которая появляется как в настольном, так и в мобильном режиме, но когда она находится в начале мобильного дизайна, которая составляет 850 пикселей, кнопка скрыта под заголовок баннера. Я хочу убрать содержание основного текста всего сайта. Я могу сделать это в режиме рабочего стола со свойством CSS как - margin-top: 200px, и мне интересно, есть ли какой-либо код @media или любой другой тип, который может изменить это только для мобильного дизайна.

Я обнаружил, что если я добавлю код <br>, это изменит его, но, несомненно, есть лучший способ, чем просто иметь несколько <br> в коде кнопки, и даже это просто изменит его для дизайна рабочего стола.

Извините, если мое объяснение не имеет особого смысла.

Я покажу код своей кнопки, если это поможет, и если любой другой код понадобится, может кто-нибудь просто дать мне знать. 

<!--Button Code Start-->
<div class="quote-button-main">
  <center>
    <style>
      .quote-button-main .button {
        display: inline-block;
        border-radius: 20px;
        background-color: #45C236;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 20px;
        padding: 15px;
        width: auto;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }

      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }

      .button span:after {
        content: '\00bb';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
      }

      .button:hover span {
        padding-right: 26px;
      }

      .button:hover span:after {
        opacity: 1;
        right: 0;
      }
    </style>

    <a href="products.asp" <button class="button" style="vertical-align:middle"><span>CLICK HERE FOR A NO OBLIGATION INSTANT QUOTE!</span></button> </a>

  </center>
</div>
<!--Button Code END-->

Еще раз спасибо за любую помощь!

Снимок экрана режима рабочего стола: Desktop Mode Снимок экрана режима Mobile с кнопкой, скрытой под верхним баннером:

Mobile Design

1 Ответ

1 голос
/ 19 февраля 2020

Ну, просто поместите это верхнее поле для вашей оболочки контента в медиа-запрос под другими CSS правилами, похожими на это: 

@media screen and (max-width: 850px) {
  .yourcontentdiv {
    margin-top: 200px;
  }
}
...