Bootstrap — Как присоединить надпись над колонками для мобильных устройств?

Question

[neeli]

Добрый день. Кто-то мог бы подсказать как можно с помощью bootstrap или своего css (но сайт на основе bootstrap) исправить такое положение дел take.ms/wdtOs надписи над колонками склеиваются до кучи в мобильном формате, как бы их прикрепить так чтобы и не прокручивались вместе с колонкой - за это у меня отвечает в стилях (.text-center { position:fixed;z-index: 101;top:60px;} и ставали на свое место в мобильном виде - каждая надпись над своей колонкой?

Answer 1

[Localhost]

position: fixed; - фиксирует текст и при прокрутки текст будет зафиксирован.

position: relative; задайте.
и для текста display: block;

Например так

<div class="filter">
<a>Текст</a>
<a>Текст 2</a>
</div>

<style>
.filter{
position: relative;
}
.filter a{
 display: block;
}
</style>

Comments

[neeli]

Спасибо! но мне как раз и нужно чтобы он был зафиксирован при прокрутке. Только зафиксирован над каждой колонкой а не вверху страницы. Проблематика только в мобильном виде - так как все надписи склеиваются в кучу если срезать браузер до половины экрана, или открыть в мобилке

[Localhost]

через media изменить классы для мобильной версии.

@media (max-width:767px){

}

[neeli]

Алексей: Может вы бы взглянули на код ?

<div class="col-md-4 col-xs-12">
<h3 class="text-primary text-center">PAYABLE 3D MODELS</h3>

[[!pdoPage?
&element=`msProducts`
&parents=`61`
&pageVarKey=`altpagge`
&pageNavVar=`altpagge.nav`


]]
[[!+altpagge.nav]]
</div>



<div class="col-md-4 col-xs-12">
<h3 class="text-primary text-center">ALL 3D MODELS</h3>
[[!pdoPage?
&element=`msProducts`
&sortby=`RAND()`

]]
[[!+page.nav]] 
</div>



<div class="col-md-4 col-xs-12">
<h3 class="text-primary text-center">FREE 3D MODELS</h3>
[[!pdoPage?
&element=`msProducts`
&parents=`32`
&pageVarKey=`altpage`
&pageNavVar=`altpage.nav`

]]
[[!+altpage.nav]]
</div>
</div>
</div>

нужно сюда добавить или в какой то блок отдельный взять и задать медиа?

[Localhost]

neeli: лучше ссылку напишите

[neeli]

dddmod.com

[neeli]

Алексей: Это сайт dddmod.com Блин, я уже все перепробовал, и выстраивал отдельными блоками сверху, и так и этак - это просто нереально)

[Localhost]

neeli: пропишите это в styles.css после .text-primary{}

@media (max-width:767px){
.text-primary {
    position: relative;
    z-index: 101;
    top: 0px;
}
}

[neeli]

Алексей: Вот это да) у меня весь день заняло то что вы сделали за три минуты. Я бы мог записать какую нибудь вашу почту на будущее? Вы вообще заказы берете если что?

[Localhost]

neeli: да бывает беру, когда есть свободное время, но пока очень занят проектами, а тут нравиться заходить и помогать людям, так что заходите и спрашивайте у людей помощь)

[neeli]

Алексей: Алексей, рас уж мы затеяли эту беседу) подскажите пожалуйста еще на счет такой ширины экрана take.ms/tdbum вобщем то все сработало, с мобилки читается прекрасно но когда стягиваею браузер до этой ширины что на скрине - та же штуковина. Я было добавил еще размер через энд но что-то не то вышло и контейнеры упали ниже боковой прокрутки. Как надо записать эту ширину экрана?

[Localhost]

neeli: вместо max-width:767px напишите max-width:768px

[neeli]

Алексей: Что-то все равно в браузере склеиваются буквы. Но ладно, то уже не такая беда - главное что с мобильного теперь читается все. Спасибо вам большое за то что помогли!)