Recommended Posts

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

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

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

Edited by Seendorei

Share this post


Link to post
Share on other sites

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

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

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

...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

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

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

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


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

  • Member Statistics

    46,251
    Total Members
    3,128
    Most Online
    shottywork
    Newest Member
    shottywork
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Создали большой гибкий сайт на тематику "Продажа лекарств от Гепатита" Сделано: - С нуля разработана концепция и структура сайта;
      - Разработан стильный и современный дизайн;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Натянули на Wordpress;
      - Подобрали хостинг и домен для клиента, установили и настроили сайт.
      - бонусом предоставили рекомендации по оптимизации и раскрутке сайта от нашего СЕОшника Клиент получил гибкую платформу, которая максимально удобная как для администратора, так и для покупателей сайта.
      Наполнять сайт текстами клиент предпочел сам.
      Сделали для клиента текстовую, а также видео инструкцию по управлению сайтом:
      https://www.youtube.com/watch?v=PREmX06KayQ
      https://www.youtube.com/watch?v=Kbh4CW4pui4 Ссылка на сайт http://sofosbuvir-daklatasvir.ru/ Срок изготовления сайта - 1 месяц. Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин, группа в соц сетях. 
      По невысокой цене и разумные сроки Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Внимание - Акция - от AlfaHoster!!

      Представляем наш новый тариф - Бесплатный Хостинг!
      Параметры тарифа: SSD -150Mb, RAM - 128Mb, MySQL 5.5.6 -2
      Все подробности параметров тарифа смотрите на страничке сайта хостинг-компании AlfaHoster
      Теперь практически любой может воспользоваться услугами хостинга - бесплатно.
      Поспешите воспользоваться моментом - и протестировать наши услуги, акция ограничена во времени!
      _________________
      AlfaHoster.com - надежный и недорогой хостинг для сайтов
    • Не соглашусь с Вами. Вот вам 2 очень простых примера. LESS: @color: red; a { color: @color; } @color: blue; Итог: a { color: blue; }   SASS: $color: red; a { color: $color; } $color: blue; Итог: a { color: red; } Разница в обоих результатах совершенно разная. Этим успешно можно пользоваться. Вариант с LESS шикарно решает задачи, когда требуется "сквозная" конфигурация проекта (внесение изменений в конфигурацию на любом этапе выполнения). Вариант с SASS потребует от разработчика в начале определять переменные, и лишь потом ими пользоваться, не имея возможности влиять на их значение в любой момент выполнения.
  • Popular Contributors