Ищу Ищу верстальщика, который может...

[A16a]

Доброго времени суток.

Есть кто разбирается в верстке? Хочу чтобы вы мне помогли сделать один код резиновым/адаптивным под устройства.
[HIDEL="3"]https://codepen.io/iremlopsum/pen/OVMxzp[/HIDEL]
В данной момент я не блистаю пониманием как можно это сделать. То ли вкладки горизонтальном положении. и контент под ним.

 

[kel91]

$(".choose").click(function() {
$(".choose").addClass("active");
$(".choose > .icon").addClass("active");
$(".pay").removeClass("active");
$(".wrap").removeClass("active");
$(".ship").removeClass("active");
$(".pay > .icon").removeClass("active");
$(".wrap > .icon").removeClass("active");
$(".ship > .icon").removeClass("active");
$("#line").addClass("one");
$("#line").removeClass("two");
$("#line").removeClass("three");
$("#line").removeClass("four");
})
Это талант надо иметь...

 

[A16a]

$(".choose").click(function() {
$(".choose").addClass("active");
$(".choose > .icon").addClass("active");
$(".pay").removeClass("active");
$(".wrap").removeClass("active");
$(".ship").removeClass("active");
$(".pay > .icon").removeClass("active");
$(".wrap > .icon").removeClass("active");
$(".ship > .icon").removeClass("active");
$("#line").addClass("one");
$("#line").removeClass("two");
$("#line").removeClass("three");
$("#line").removeClass("four");
})
Это талант надо иметь...

Разобравшись я понял что это обычное программирование.) Одно активируется, остальные дизейблится. и так с каждым.

 

[kel91]

#wrapper {
width: 100%;
height: 100%;
ставь и все. или адаптивно меняй его ширину в медиа запросах

 

[kel91]

Разобравшись я понял что это обычное программирование.) Одно активируется, остальные дизейблится. и так с каждым.

это в 3 строчки можно все записать, а не такой лапшекод, который процессор грузит и прыгает по дом дереву туда-сюда, а выборки в переменные занести

 

[A16a]

это в 3 строчки можно все записать, а не такой лапшекод, который процессор грузит и прыгает по дом дереву туда-сюда, а выборки в переменные занести

было бы круто, я с js не дружу.

 

[kel91]

было бы круто, я с js не дружу.

ладно, так сойдет, некогда мне переписывать, там никто перетыкивать их по 100 раз на дню не будет, $("#line").removeClass() а потом addClass(param) - достаточно для удаления всех классов и с остальными так; поставь #wrapper {width: 100%; height: 100%; вместо пикселей и твоя задача решена, ничего не надо вертикально располагать. хорошо и так.

 

[A16a]

ладно, так сойдет, некогда мне переписывать, там никто перетыкивать их по 100 раз на дню не будет, $("#line").removeClass() а потом addClass(param) - достаточно для удаления всех классов и с остальными так; поставь #wrapper {width: 100%; height: 100%; вместо пикселей и твоя задача решена, ничего не надо вертикально располагать. хорошо и так.

Я так ставил. Еще добавил max-weight: чтобы по экрану не расплавился.
Ужас на моем экране творится, особо не читаемая. у меня ширина 480px.
https://image.prntscr.com/image/F6ctj6uUS2Cim00A5efpaA.png

А можно так реализовать. Чтобы в определенном моменте. когда тексты слева не вмещается, они просто скрывались. и оставались тока иконки

 

[kel91]

Я так ставил. Еще добавил max-weight: чтобы по экрану не расплавился.
Ужас на моем экране творится, особо не читаемая. у меня ширина 480px.
https://image.prntscr.com/image/F6ctj6uUS2Cim00A5efpaA.png

А можно так реализовать. Чтобы в определенном моменте. когда тексты слева не вмещается, они просто скрывались. и оставались тока иконки

в голову нтмл вставь это, если там такого нет
<meta name="viewport" content="width=device-width, initial-scale=1">
в js невозможно отследить наплыв элементов друг на друга на этапе вывода пользователю, скрыть можно в медиа запросе, если в параграфы с классом обернуть текстовое содержимое и дисплей нан, а еще лучше сделать запрос такого плана, чтобы уменьшить и размер иконок и размер текста, подбирай параметры
@Media screen and (max-width:560px) {
.icon {
width: 16px;
height: 16px;
}
#wrapper{
font-size:.8em;
}
h1{
1.5em;
}
}

 

[ChetAtkins]

Господи, что вы насоветовали. Бери Bootstrap и пользуйся на здоровье. На офф сайте расписано все подробно как использовать сетку, есть так же и ру аналоги офф сайта. Не зря эту сетку признал весь мир. Рассмотри так же возможности flexbox верстки.

 

[kel91]

Господи, что вы насоветовали. Бери Bootstrap и пользуйся на здоровье. На офф сайте расписано все подробно как использовать сетку, есть так же и ру аналоги офф сайта. Не зря эту сетку признал весь мир. Рассмотри так же возможности flexbox верстки.

ну так насоветуй сам, а не пространно рассуждай теоретически, там кстати на флексах все и сверастано... конечно на бутстрапе3 более кроссбраузерно, тут я с тобой согласен