Не могу адаптировать данную верстку для всех типов устройств

221
29 июля 2018, 07:10

Есть следующая верстка, не получается её адаптировать для устройств шириной экрана от 1024px до 400px. Пытался при помощи bootstrap классов сделать, чтобы блоки были на всю ширину при просмотре с планшетов/телефонов, но bootstrap тянет за собой свойство float и это ломает верстку. Сейчас эта верстка выглядит нормально только при полноэкранном просмотре

.center-div, 
.center-div>* { 
  float: none; 
}
<center style=" 
    display:inline-block; 
    column-width: 323px; 
    column-gap: 0px; 
    column-count: 2; 
    height: 100%; 
    max-height: 305px; 
    " class="center-div center-mobile center-table"> 
  <a href="http://magadanmedia.ru/news/hashtag/767/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitypeople.jpg" class="center-nav-a" style="position: relative;height: 100%;max-height: 100px;/* margin: 5px; */margin-right: -17px;width: 370px;margin-top: 10px;" width="323"> 
    <span style="position: absolute;left: 1em; 
     bottom: -0.3em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Люди</span> 
  </a> 
  <a href="http://magadanmedia.ru/news/hashtag/777/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityplace.jpg" class="center-nav-a" style="position: relative;/* margin: 5px; */margin-right: 0px;width:  370px;margin-right: -17px;margin-top: 10px;" width="323"> 
    <span style="position: absolute;left: 1em;    bottom: -1.6em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Места</span> 
  </a> 
  <a href="http://magadanmedia.ru/news/hashtag/743/" target="_blank" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcityfood.jpg" class="center-nav-a" style="position: relative;/* margin: 5px; */width:  100%;max-width: 370px;margin-right: -22px;margin-top: 10px;" width="323"> 
    <span style="position: absolute;left: 1em;bottom: 0.8em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Еда</span> 
  </a> 
  <a href="http://magadanmedia.ru/news/hashtag/778/" style="position: relative;"><img alt="" height="165" src="http://www.primamedia.ru/files2/upimg/magadanmedia/mmcitytrack.jpg" class="center-nav-a" style="position: relative;height: 100%;max-height: 100px;width: 370px;margin-right: -17px;margin-left: 10px;padding-right: 10px;margin-top: 12px;padding-bottom: 0px;" 
      width="323"><span style="position: absolute;left: 1em;    bottom: -0.3em;color:  black;font-size: 26px;"><tt style="font-family: inherit; opacity: 0.5;">#</tt> Тропы</span></a><br> 
</center> 
<p> 
  <a href="https://t.me/MagadanMediaChat" target="_blank"><img title="Город в Телеграм" src="/files2/upimg/magadanmedia/mmcitytg.jpg" alt="" width="800" style="width: 102%;padding-left: 3px;" height=""></a> 
</p>

Answer 1

Попробуйте использовать медиазапросы

Стили для промежутка от 1024px до 400px выглядит так:

@media (max-width:1024px) and (min-width:400px) {
 /* Стили */
}

Для всех разрешений до 1024px:

@media (max-width:1024px) {
 /* Стили */
}

И, соответственно, для всех разрешений после 400px: 

@media (min-width:400px) {
 /* Стили */
}
READ ALSO
div под div в html не ставится из-за align left
HTML

div под div в html не ставится из-за align left

Всем привет! Пробую разместить один div под другимПроблема в том, что внутри div есть фото, у которого есть атрибут align="left"

 203
Событие submit и обработчик события
HTML

Событие submit и обработчик события

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

 171
Как скачать apk, сделанный на NativeScript?
HTML

Как скачать apk, сделанный на NativeScript?

Потестировал платформу NativeScript для создания мобильных приложений на JS/HTML

 186
Как можно реализовать данную карточку?
HTML

Как можно реализовать данную карточку?

Испробовал уже несколько вариантов - через float, inline-block и flex, но верстка постоянно едет и возникает проблема с вертикальным выравниваем строк,...

 181