CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Clickys
Clickys

Reputation: 511

Bootstrap (xs) screen nav bar doesnt fit col-6 and col-6

I wrote the following code for footer navbar. When the screen is getting less than 770px the navbar is not in 6 cols and 6 cols with the socials. Social icons are getting to line below. Here is my code: 

<div class="row footer">
  <div class="col-xs-6 col-sm-6 col-md-9 col-lg-10">
    <ul class="fontqu">
      <li class="navmenu"><a href="home.html" class="fontqu">HOME</a></li>
      <li class="navmenu"><a href="terms.html"class="fontqu">TERMS</a></li>
      <li class="navmenu"><a href="about.html"class="fontqu">ABOUT</a></li>
      <li class="navmenu"><a href="contact.html"class="fontqu">CONTACT</a></li>
    </ul>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-2 socials "> 
    <a href="https://play.google.com/store/apps/dev?id=7250687625297133305" target="_blank"><img class="footimg" src="img/playstore.png" alt="playstore"></a>
    <a href="https://www.youtube.com/channel/UCxqUNA0u2I3D5iQcOEii0Eg" target="_blank"><img class="footimg" src="img/youtubelink.png" alt="playstore"></a>
    <a href="https://www.facebook.com/la.applications" target="_blank"><img class="footimg" src="img/facebook40x40.png" alt="playstore"></a>
    <a href="https://plus.google.com/u/0/+Laapps_business/posts" target="blank"><img class="footimg" src="img/gplus-64.png" alt="playstore"></a>
  </div>
</div>

Here is a screenshot with the screen less than 750px. Whats the solution so I can make it on xs screens to be 6 cols the navbar and 6 the social icons?

enter image description here

Upvotes: 1

Views: 366

Answers (1)

LOTUSMS
LOTUSMS

Reputation: 10260

Anything under 768px is considered a mobile device view (iPad portrait in this case). Most front-end developers will consider full width at mobile view. So, you should consider 1 of 2 solutions:

  1. converting to full width levels for the menu and socials below it

    <div class="col-xs-12 col-sm-6 col-md-9 col-lg-10">
   <ul>
      ...
   </ul>
</div>

or

  1. reduce the padding between the li's for that view

     @media (max-width: 768px){
   .footer > div ul.fontqu li{
     padding: 5px 10px //adjust accordingly here.
     margin: 0px 5px   //the margin should be adjusted if it's too much
   }
 }

Bottom line is, the amount of margin and padding plus the li text size is overflowing the real estate you have after the col-xs-6 exceeded it's alloted width to display them inline, thus making them wrap. The key is to stpe them from wrapping by using either of the techniques hereby suggested.

Next time post the css code, specifically when you add the css tag

Have fun!

Upvotes: 1

Related Questions