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,433
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.