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

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

Goga

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

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

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

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

Goga

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

MEGAVOLT

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

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 494
Репутация
6 457
Баллы
266
Щас на работе, потом че нить подскажу
 
  • Мне нравится
Реакции: Goga

Goga

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

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

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

Skaiman

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