проблема ширины и высоты изображения в мобильных устройствах - PullRequest
Новая
       21

проблема ширины и высоты изображения в мобильных устройствах

0 голосов
/ 13 марта 2020

поэтому у меня есть мой дизайн заголовка, который выглядит следующим образом ( см. Изображение ниже )

дизайн заголовка

так что все работает нормально настольная версия сайта, но у меня проблемы с мобильной версией. Изображения не реагируют. В основном я хочу преобразовать дизайн заголовка в рабочий код. Пожалуйста, помогите!

Код 


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    padding:0;
    margin:0;
    width: 100%;
    height: 100%;
}

#img{
    position: absolute;
    right: 100;
    top: 35px;
    z-index: -1;
    width: 30%;
}


#img2{
    position: absolute;
    right: 0;
    left: 100;
    margin-top: 30px;
    margin-left: 10em;
    top: 50px;
    z-index: -1;
    width: 30%;
}
<header>
    <div class="col-lg-12" style="margin-bottom: 10em;">
        <div class="row">
            <div class="col-lg-8  my-auto mt-3 mb-5">
                <h2 style="font-weight: bolder;margin-top: 2em;margin-left:1em;font-size: 7vw;font-family: 'Poppins', sans-serif;" data-sal="slide-up" style="margin-left: 1.5em;" data-sal-delay="1500" data-sal-easing="ease-out-bouce" data-sal-duration="1200"><span class="mb-5">Capture your</span><br><span>priceless</span><br><span>moments</span><br><span>with aw zone</span></h2>     
                </div>
                <div id="img">
                    <img src="https://images.pexels.com/photos/1024613/pexels-photo-1024613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" width="300" class="thumbnail">
                </div>
                <div id="img2">
                    <img src="https://images.pexels.com/photos/1024613/pexels-photo-1024613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" width="300">
                </div>
        </div>
  </div>
  </header>

1 Ответ

0 голосов
/ 13 марта 2020

Для мобильной версии вы должны вставить Media Queries в вас CSS. Проверьте эту ссылку , вы обязательно найдете ответ. Просто добавьте медиазапросы в свой код CSS.

...