Рекомендованные сообщения

Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.

В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.

На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.

Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.


CSS code блока и т.д: 
 

@media (max-width: 320px) {
  .wat{
    left: 260px;
  }
}

.wat{
  margin:0;
  margin-left: 5.5em;
  left: auto;
  top: 260px;
  border: 3px red solid;
  border-radius: 3px;
  width: 150px; height: 50px;
  position: relative;
  padding-left: 4px;
  padding-top: 0px;
  display: block;
}
#btn3{
  position: absolute;
  margin-left: 8px;
  top: 13px;
  border: 3px red solid;
  border-radius: 3px;
  width: 150px; height: 50px;
}
span{
  font-size: 16pt;
  margin-left: 50px;
  position: absolute;
  top: 14px;
  left: -1px;
  font-size: 16pt;
  color: white;
}
.opa{
  display: block;
  border-radius: 3px;
  border: 3px red solid;
  width: 150px; height: 50px;
  position: relative;
  z-index: 100000;
  margin-top: -12.8em;
  margin-left: 18.5em;
}
@media (max-width: 320px){
  .opa{
    width: 25%;
    height: auto;
  }
}

Вот HTML Код:

<ul id="slides">
      <li class="slide showing">Slide 1
          <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>-->
      </li>
 <li class="slide">Slide 2</li>
 <li class="slide">Slide 3</li>
</ul>

<div class='opa'>
  <img src='app.svg'></img>
  <span>App Store</span>
</div>

 

 

AGgI4xPyk9w.jpg        kI8zjk5-jGk.jpg

Изменено пользователем Seendorei

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

что конкретно не понятно? локализуйте вашу проблему! 

а пока вот http://jsfiddle.net/zy4uk26j/5/ на вашем примере сделал,  

два примера с разным поведением одного и того же блока 

...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: Takono
      Здравствуйте. Создан слайдер из трёх слайдов. На слое над слайдером с помощью :before создан контент (один блок, содержащий текст, меню со ссылками и форму). Однако при адаптации под разные разрешения всё очень сильно съезжает и искажается. Есть ли какой-то более рациональный способ разместить слой с контентом над слайдером, чтобы слайды переключались под недвижимым контентом? Подскажите пожалуйста.
      id="main" это блок, который находится в слое над id="slider"
       
      index.html
      style.css
    • Автор: Михаил HTML
      Всем доброго дня.
      Ищу помощника или наставник в создании небольшого сайта.
      С данного момента погружаюсь в тему изучения верстки.
      Мой максимум это HTML i CSS.
      Сайт будет представлять из себя небольшую записную книжку( не часто используемую). Пока без картинок, просто текст.

      Естественно буду пытаться сделать его, чтобы он нормально читался и на компьютере и на мобиле (адаптивным). На рисунках, что приложу, я набросал своё представление о том как он будет выглядеть. В сети нашёл небольшой визуальный пример, что мне понравился( нравится).

      //Движки и блоги использовать не хочу, это сложно для меня. Написал текст, вставил его в стандартную страницу htmlя и написал ссылку на главной станице сайта, вот все что мне нужно.


    • Автор: Rusik177
      Приветствую друзья не могу понять почему не работает адаптивка.  Осваиваю адаптивную верстку на основе Grid . По задумке у меня несколько колонок которые при сжатии экрана менее чем 500 пикс., должны стать в две колонки. Не могу понять в чем подвох. Вроде бы пример элементарный.  Может какая синтаксическая ошибка. Буду оч признателен если подскажете. 

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.