CODEWITHSUNDEEP
cssfacebooktwitter-bootstraptwitter
bard
bard

Reputation: 3052

Bootstrap 3 "row" class not working on mobile?

The front page of my website wisderm.com has the Twitter Follow and Facebook buttons next to each other. On mobile though, the Facebook buttons are not on the same line as the Twitter button, even though I've put them in a div with the class "row". 

<!-- Social -->
<div class="container">
<div class="row">
    <a href="https://twitter.com/wisderm" class="twitter-follow-button" data-show-count="false" data-size="large" data-lang="en">Follow @wisderm</a>
    <div class="fb-like" data-href="https://facebook.com/wisdermcom" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
</div><!-- end of row -->
</div><!-- end of container -->

Why is this? Is it because the Twitter button is in an iframe? And how can I fix it?

Image on my Nexus 4: Messed up Facebook and Twitter buttons

Image for when using display: inline !important: Messed up buttons 2

Upvotes: 0

Views: 135

Answers (1)

Nimmi
Nimmi

Reputation: 2017

You can use ul and li and apply CSS like below on li(you can also use class). 

ul li {
float:left;
list-style:none;
margin-right:1em;
}

Upvotes: 1

Related Questions