Responsive buttons

[geiger]

What is the best way to make the following responsive, so that on a small screen the “comments” button appears on a line above the “share” icons? Code is below. Thank you!

<div class="newsActions"> <a class="callToAction" href="http://wearabletechforums.com/t/the-u-s-ftc-is-holding-meetings-with-apple-over-privacy-concerns-with-healthkit.152/" sl-processed="1"><span><i class="fa fa-comment-o"></i>&nbsp;&nbsp;Comments</span></a> &nbsp;&nbsp;Share:&nbsp; <a href="https://twitter.com/share?url=http://wearabletechforums.com/t/the-u-s-ftc-is-holding-meetings-with-apple-over-privacy-concerns-with-healthkit.152/" rel="nofollow" target="_blank" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" sl-processed="1"> <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x button-twitter"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> <a href="https://www.facebook.com/sharer/sharer.php?u=http://wearabletechforums.com/t/the-u-s-ftc-is-holding-meetings-with-apple-over-privacy-concerns-with-healthkit.152/" rel="nofollow" target="_blank" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" sl-processed="1"> <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x button-facebook"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> <a href="https://plus.google.com/share?url=http://wearabletechforums.com/t/the-u-s-ftc-is-holding-meetings-with-apple-over-privacy-concerns-with-healthkit.152/" rel="nofollow" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" sl-processed="1"> <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x button-google"></i><i class="fa fa-google fa-stack-1x fa-inverse"></i></span></a> </div>

[bluedreamer]

Depending on your other CSS you could try something like this:

.callToAction {
display: block;
margin-bottom: 1em; 
clear: both; 
}

[geiger]

That does not seem to have changed anything.

[bpartch]

Do you have a link to the live version of this?

[bpartch]

Never mind, I found it in the address bar of the screenshot. LOL

[RyanReese]

You have given us no CSS. How do you expect us to know how you have stuff set up?

We need a live link as previously stated. Are the comments/social media buttons floated? Try adding float:none to post #2s code.

[RyanReese]

Thanks @bpartch

@OP, the code didn’t work since you use a.callToAction. It’s a bit more specificity. Change post#2 to a.callToAction (and place it AFTER your other callToAction CSS so it gets precedence. Your mobile rules should be after everything anyway.

[bpartch]

First thing is to get rid of this at small widths:

.newsActions{
  text-align:right;
}

then

a.callToAction{
  display:block;
  margin-bottom:1em;
}

[geiger]

Apologies. Here’s the link: http://wearabletechforums.com

RyanReese, I tried that but the Comments bar expanded to 100% width.
bpartch, same issue. Your screenshot shows a comments bar that is expanded.

[bpartch]

How about adding a width to it?

a.callToAction{
  display:block;
  margin-bottom:1em;
  width:100px;
}

[RyanReese]

Ok then keep it floated but make the next element clear from it.

[bpartch]

This also seems to work for me:

a.callToAction{
  display:table;
  margin-bottom:1em;
}

[geiger]

Both resulted in this:

To be clear, I only want the buttons to be on separate lines if there isn’t enough room. Also, the comments button should be right aligned.

[RyanReese]

You do have this in a media query right…?

You can float comments, and also put the share / twitter/facebook/google in a div and float THAT. Then when there isn’t enough room, it’ll drop the second line.

[geiger]

Sorry, I don’t understand. Could you please clarify?

[RyanReese]

What don’t you understand?

[geiger]

I tried it like this:

[code]

comment button floated right

share buttons floated right

[/code] They were displayed on separates lines when there was room. Also, it messed up my comment button styling, which is a different issue.