geiger
November 15, 2014, 4:38pm
1
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> Comments</span></a>
Share:
<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>
Depending on your other CSS you could try something like this:
.callToAction {
display: block;
margin-bottom: 1em;
clear: both;
}
geiger
November 15, 2014, 7:52pm
3
That does not seem to have changed anything.
bpartch
November 15, 2014, 9:55pm
4
Do you have a link to the live version of this?
bpartch
November 15, 2014, 9:56pm
5
Never mind, I found it in the address bar of the screenshot. LOL
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.
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
November 15, 2014, 10:01pm
8
First thing is to get rid of this at small widths:
.newsActions{
text-align:right;
}
then
a.callToAction{
display:block;
margin-bottom:1em;
}
geiger
November 15, 2014, 10:22pm
9
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
November 15, 2014, 10:30pm
10
How about adding a width to it?
a.callToAction{
display:block;
margin-bottom:1em;
width:100px;
}
Ok then keep it floated but make the next element clear from it.
bpartch
November 15, 2014, 10:45pm
12
This also seems to work for me:
a.callToAction{
display:table;
margin-bottom:1em;
}
geiger
November 15, 2014, 11:26pm
13
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.
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
November 16, 2014, 12:20am
15
Sorry, I don’t understand. Could you please clarify?
What don’t you understand?
geiger
November 16, 2014, 1:10am
17
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.
system
Closed
February 15, 2015, 8:20am
18
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.