Вопрос По адаптации кода для мобильной версии

  • Автор темы Goga
  • Дата создания

Goga

Проверенный
Сообщения
112
Репутация
11
Баллы
18
Доброго всем времени суток.

Подскажите пожалуйста, как реализовать следующий принцип размещения материала в мобильной версии

1. Есть три колонки (три варианта предоставления каких то услуг)
2. В "десктопной" версии все по классике жанра и все три колонки расположены слева-на право
3. А в мобильной версии они также располагаются слева на право и тем самым портят дизайн

Как сделать, чтобы в мобильной версии было одна колонка над другой?

Вот пример кода:
HTML:
<p> STEP <b>1</b> OF <b>2</b> </p>
<h2> Choose a plan that's right for you.
  <div id="pricing-table" class="clear">
    <div class="plan">
      <!-- title & header -->
      <h3><b>BASIC</b><span>$7.99</span></h3>
      <h4> <b> / MONTH </b> </h4>
      <!-- description -->
      <ul>
        <li><b>HD</b> Available <span class="check">&#10004</span></li>
        <li><b>Commercial</b> Free <span class="cross">&#10006</span></li>
        <li><b>Unlimited</b> Movies/TV Shows <span class="cross">&#10006</span></li>
        <li><b>Cancel</b> Anytime <span class="check">&#10004</span></li>
        <a class="signup" href="">Select Plan</a>
      </ul>
    </div>
    <div class="plan" id="most-popular">
      <!-- title & header -->
      <h3><b>STANDARD</b><span>$9.99</span></h3>
      <h4> <b>/ MONTH</b> </h4>
      <!-- description -->
      <ul>
        <li><b>HD</b> Available <span class="check">&#10004</span></li>
        <li><b>Commercial</b> Free <span class="cross">&#10006</span></li>
        <li><b>Unlimited</b> Movies/TV Shows <span class="check">&#10004</span></li>
        <li><b>Cancel</b> Anytime <span class="check">&#10004</span></li>
        <a class="signup" href="">Select Plan</a>
      </ul>
    </div>
    <div class="plan">
      <!-- title & header -->
      <h3><b>PREMIUM</b><span>$13.99</span></h3>
      <h4> <b>/ MONTH</b> </h4>
      <!-- description -->
      <ul>
        <li><b>HD</b> Available <span class="check">&#10004</span></li>
        <li><b>Commercial</b> Free <span class="check">&#10004</span></li>
        <li><b>Unlimited</b> Movies/TV Shows <span class="check">&#10004</span></li>
        <li><b>Cancel</b> Anytime <span class="check">&#10004</span></li>
        <a class="signup" href="">Select Plan</a>
      </ul>
CSS:
#pricing-table {
  margin: 50px auto;
  text-align: center;
  width: 892px;
}
#pricing-table .plan {
  font: 14px "Lucida Sans", "trebuchet MS";
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
  background: #fff;
  border: 3px solid;
  border-radius: 10px;
  color: black;
  top: 3px;
  padding: 20px;
  width: 250px;
  float: left;
  position: relative;
  left: 10%;
}

#pricing-table #most-popular {
  z-index: 2;
  margin: 2px;
  width: 250px;
  top: 1px;
  bottom: 10px;
  border: 3px solid;
  padding: 23px 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 10px;
}
/* --------------- */
/* basic & premium grey borders */
#pricing-table h3 {
  font-size: 20px;
  font-weight: normal;
  padding: 30px;
  margin: -20px -20px 50px -20px;
  border-radius: 5px 5px;
  background-color: #eee;
}

#pricing-table #most-popular h3 {
  /* standard grey border */
  margin-top: -22px;
  padding-top: 30px;
  -moz-border-radius: 2px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

#pricing-table .plan:nth-child(1) h3 {
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  border-radius: 5px 5px 0 0;
}

#pricing-table .plan:nth-child(4) h3 {
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}

#pricing-table h3 span {
  display: block;
  font: bold 30px/100px "Times New Roman", Serif;
  color: black;
  background: #fff;
  border: 4px solid #ddd;
  height: 100px;
  width: 100px;
  margin: 10px auto -65px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
  margin: 20px 0 0 0;
  padding: 0;
  list-style: none;
}
/* dividers */
#pricing-table li {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}

/* --------------- */

#pricing-table .signup {
  position: relative;
  padding: 8px 20px;
  margin: 20px 0 0 0;
  color: #fff;
  font: bold 14px Arial, Helvetica;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  background-color: #000000;
  background-image: -moz-linear-gradient(#000000, #000000);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#000000),
    to(#000000)
  );
  background-image: -webkit-linear-gradient(#000000, #62bc30);
  background-image: -o-linear-gradient(#000000, #000000);
  background-image: -ms-linear-gradient(#000000, #000000);
  background-image: linear-gradient(#000000, #000000);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(0, 0, 0, 0.7);
}

#pricing-table .signup:hover {
  background-color: #62bc30;
  background-image: -moz-linear-gradient(#62bc30, #72ce3f);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#62bc30),
    to(#72ce3f)
  );
  background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
  background-image: -o-linear-gradient(#62bc30, #72ce3f);
  background-image: -ms-linear-gradient(#62bc30, #72ce3f);
  background-image: linear-gradient(#62bc30, #72ce3f);
}

#pricing-table .signup:active,
#pricing-table .signup:focus {
  background: #62bc30;
  top: 2px;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

/* --------------- */

.clear:before,
.clear:after {
  content: "";
  display: table;
}

.clear:after {
  clear: both;
}

.clear {
  zoom: 1;
}
/* checkmark & x coloring */
.cross {
  color: red;
}
.check {
  color: green;
}
 

MEGAVOLT

Наглая рожа
Администратор
Сообщения
636
Репутация
446
Баллы
63
Goga, Добрый день!
для какой ветки форума предполагается?
 
  • Мне нравится
Реакции: Goga

Goga

Проверенный
Сообщения
112
Репутация
11
Баллы
18
MEGAVOLT, для "СТРАНИЦЫ"
Делаю просто страницу информационную для пользователей
 

MEGAVOLT

Наглая рожа
Администратор
Сообщения
636
Репутация
446
Баллы
63
Вот да, только хотел сказать...
 
  • Мне нравится
Реакции: Goga

Skaiman

Разработчик
Сообщения
6 926
Репутация
6 826
Баллы
266
Щас на работе, потом че нить подскажу
 
  • Мне нравится
Реакции: Goga

Goga

Проверенный
Сообщения
112
Репутация
11
Баллы
18
Skaiman, СПАСИБО БОЛЬШОЕ!!!!
Прошу прощения за флуд!!!
--- Сообщение автоматически объединено: ---

Отличные варианты!
Только там на столько наворочен CSS ((
И не то что это мне плохо, просто много очень "классов", которые называются одинаково с форумом, и при попытке использовать их
Дизайн форума просто переворачивает ((
А в ручную искать что есть чего нет, пока не хватает опыта.
Возьму самый простой вариант и буду его допиливать потихоньку.
Еще раз большое спасибо!
--- Сообщение автоматически объединено: ---

Не знаю на сколько я правильно сделал, но создал папку CSS и туда свой стиль, который подрубил именно к своей странице.
Может это не правильное исполнение, но так я хоть вижу только на одной странице, все что происходит по тем стилям, которые пришлось прилепить для своих нужд.
Читал, что нет в этом необходимости и надо все делать через extra.less
Но так и правда не весь форум перекашивает и
body, a , ul и так далее...
Подскажите, если делаю жутко не правильно
 
Последнее редактирование:

Skaiman

Разработчик
Сообщения
6 926
Репутация
6 826
Баллы
266
Так не надо использовать все классы из примера, только относящиеся к самим блокам, зачем брать html или body, естественно будет перекашивать :) Если в блоках используются классы, такие же как на форуме, то можно все обернуть в свой, например moy-block и тогда применять
CSS:
.moy-block a {
    color: #e95846;
    text-decoration: none;
}
 
Последнее редактирование:
Сверху Снизу