CODEWITHSUNDEEP
htmlcss
The Dead Man
The Dead Man

Reputation: 5566

How to make three column on desktop and one column in small device responsive using flexbox?

I have footer section which contain three column I want it to be responsive using flex box:

<div id="footer-main">
   <div class="footer-column">
      <ul>
         <li><a href="/content/8-regulamin" class="underline-from-left">Regulamin</a></li>
         <li><a href="/content/10-zwrot-i-wymiana" class="underline-from-left">Zwrot i wymiana</a></li>
         <li><a href="/content/9-polityka-prywatnosci" class="underline-from-left">Polityka prywatności</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column">
      <ul>
         <li><a href="/faq/1-faq" class="underline-from-left">FAQ</a></li>
         <li><a href="" class="underline-from-left">Praca</a></li>
         <li><a href="/content/praca" class="underline-from-left">Kontakt</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column">
      <ul>
         <li><a href="content/prasa">Prasa</a></li>
         <li><a href="/content/wholesale">Wholesale</a></li>
      </ul>
   </div>
   <!-- footer-column -->
   <div class="footer-column" id="socialicons">

      <div id="custom-social" class="">
         <a href="https://www.facebook.com/demo" target="_blank" class="button-facebook"></a>
         <a href="https://instagram.com/demo/" class="button-instagram" target="_blank"></a>
         <a href="https://www.pinterest.com/demo/" target="_blank" class="button-pinterest"></a>
      </div>
   </div>
   <!-- footer-column -->
</div>

Here is css:

#footer-main {
    display: flex;
    justify-content: flex-end;
}


@media (max-width: 768px){
  #footer-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

when I try to check responsiveness via chrome dev tools here is what I get so far

enter image description here

what am I missing in my code?

Upvotes: 0

Views: 26

Answers (1)

Tibbelit
Tibbelit

Reputation: 1335

enter image description here

In the Chrome dev tools, the simulated resolution is 914px in width (in your picture above), which is more than the 768px (where the footer will be one colum wide instead of three). So adjust the browser window to be smaller than 768px in width - and it will work :)

  • You can see the width / height of the browser size changing next to the dev bar, in the top.

Upvotes: 1

Related Questions