There is the following layout, it is impossible to adapt it for devices with a screen width from 1024px to 400px. With the help of bootstrap classes I tried to make the blocks look full width when viewed from tablets / phones, but bootstrap draws the float property and breaks the layout. Now this layout looks fine only when viewing in full screen.

 .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>

    1 answer 1

    Try using media queries

    Styles for the gap from 1024px to 400px look like this:

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

    For all resolutions up to 1024px:

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

    And, accordingly, for all resolutions after 400px:

     @media (min-width:400px) { /* Стили */ }
    • Thank! But could you tell me what can be done to make this layout look normal for Mozilla? Prefixes do not help ( - Evgeny Shalaev