I am using the Facebook like box code in my side bar by pasting the Facebook code into a text widget. My theme is responsive, and I'd like to get the like box to resize correctly. I found this tutorial but he says the way he is doing it, isn't "fully responsive" so I didn't know if there was a better way to do it.
NOTE: this answer is obsolete. See the community wiki answer below for an up-to-date solution.
I found this Gist today and it works perfectly: https://gist.github.com/2571173
(Many thanks to https://gist.github.com/smeranda)
/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
/*
This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it.
*/
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
Tested in most modern browsers.
NOTE: Colin's solution didn't work for me. Facebook may have changed their markup. Using * should be more future-proof.
Wrap the Like box with a div:
<div id="likebox-wrapper">
<iframe src="..."></iframe> <!-- likebox code -->
</div>
and add this to your css file:
#likebox-wrapper * {
width: 100% !important;
}
As of August 4 2015, the native facebook like box have a responsive code snippet available at Facebook Developers page.
You can generate your responsive Facebook likebox here
https://developers.facebook.com/docs/plugins/page-plugin
This is the best solution ever rather than hacking CSS.
The answer you're looking for as of June, 2013 can be found here:
https://gist.github.com/dineshcooper/2111366
It's accomplished using jQuery to rewrite the inner HTML of the parent container that holds the facebook widget.
Hope this helps!
None of the css trick worked for me (in my case the fb-like box was pulled right with "float:right"). However, what worked without any additional tricks is an IFRAME version of the button code. I.e.:
<iframe src="//www.facebook.com/plugins/like.php?href=..."
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:71px; height:21px;"
allowTransparency="true">
</iframe>
(Note custom width in style, and no need to include additional javascript.)
I was trying to do this on Drupal 7 with the " fb_likebox" module (https://drupal.org/project/fb_likebox). To get it to be responsive. Turns out I had to write my own Contrib module Variation and stripe out the width setting option. (the default height option didn't matter for me). Once I removed the width, I added the <div id="likebox-wrapper"> in the fb_likebox.tpl.php.
Here's my CSS to style it:
`#likebox-wrapper * {
width: 100% !important;
background: url('../images/block.png') repeat 0 0;
color: #fbfbfb;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
border: 1px solid #DDD;}`
Related
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
I have two styles defined:
img.feedback-sprite-22{
display:block;
background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
height:22px;
border:0 !important;
padding:0;
margin:0 !important;
z-index:0;
}
img.feedback-sprite-22:hover{
background-position:0px -22px;
}
img.fb {
display:inline;
margin:auto 0;
border: none !important;
vertical-align: middle;
}
And I display the image like so:
<img class='fb feedback-sprite-22' height='22' width='65'>
Works great in ff & chrome but not ie (i've tested ie10 and ie8). IE shows the image (is it a simple gradient), but also shows the square img missing box (see below). Any ideas how to fix this? Thanks in advance.
Because you have no src in your img tag, which is needed.
Use div <div class="fb feedback-sprite-22"></div> instead of img. And define width and height in css. If you realy want to do it using css...
But in my opinion you should use clear img - like <img src="/img/feedback-sprite-22.png" alt=""> and not background in css for element like this.
If its just a gradient, why not using a CSS, gradient?
http://www.colorzilla.com/gradient-editor/
With support for every broweser including IE6-10
So the answer, I've discovered, as Choinek pointed out, is that IMG obviously has to have 'src' defined for IE. I assigned it to blank.gif and all is good. Since I already use a blank.gif on the site, it isn't another image to load.
However, I really like the idea of using a CSS gradient. This would reduce the number of images (always good).
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I know there are a lot of questions about "aligning Facebook buttons" but they all seem to talk about people using iframes directly in their markup. I'm using the HTML5 Facebook button code and then loading the iframe dynamically.
Take a look as the JSFiddle
As you can see, there are three social buttons. The Twitter and Google+1 iframes appear to autoamtically adjust their size to match their contents. The Facebook iframe does not. It appears to be a fixed width iframe with narrower contents.
Is there a simple way to make this iframe size itself properly?
I could probably use jQuery to manipulate the size of the iframe after the page loads but I'd like to avoid that. It would be nice if the iframe simply loaded up the right size from the start.
I'd also prefer to avoid using an iframe directly in my code because I dynamically load the Facebook scripts later in the page, which is what dynamically injects the iframe.
I don't know about having it auto fit, but you can override the width.
.social{
margin:20px 0;
overflow: hidden;
padding-left: 20px;
}
.social > div {
float: left;
height: 70px;
margin-right: 0px;
border: 1px solid red;
}
.facebook{
width:45px;
}
My only solution for this Facebook Like Button limitation was to place the Like button after the Google+ button. That way it doesn't matter what the width of the Facebook div ends up being. It will be equally spaced from the other buttons.
http://jsfiddle.net/FLuKW/10/
I have built a small breadcrumbs example cloning some functionality from Google's design. I have been looking to get the arrows to display on top of each-other so there isn't any white space. I have tried negative margins, possibly positioning but I wasn't able to get anything working.
Below is a link to Google's working example, along with my current demo example and a screenshot of why the breadcrumbs aren't working currently. Appreciate any help, I'm also happy to clarify anything!
Google's working example
Demo(taken offline sorry!)
Current bug screenshot:http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (sorry this was also deleted!)
The Google implementation is using postion: relative; margin-left: -13px in the CSS but at the same time they are using inline styles to give a different z-index to each link like this: image
Use javascript or your backend script to loop through each link and give each link a lower z-index.
try this:
.crumbs li {
display: inline;
float: left;
margin-right: -11px;
position: relative;
}
so they fit on eacht other. now add this:
.crumbs li:nth-child(1) {
z-index:10;
}
.crumbs li:nth-child(2) {
z-index:9;
}
.crumbs li:nth-child(3) {
z-index:8;
}
etc
the only problem is, nth-child is css3, so it's bad for your cross browser support.
You could also add classes to ever li, like "li.first li.second li.third" etc and give them decreasing z-indexes. Then it should work
Well, Google's use sprites, relative positioning and incremental z-indexes. I think you should go with the same technique. They implement the z-indexes as inline styling with the style="" attribute, which seems acceptable in this situation, especially if they are generated with PHP later on.
Another (somewhat shoddy) way of doing it is to add a wrapper that has the same background image. e.g.
<li>
<div style="float: left; background-image: url('img/bg-crumbs.png');">
2011 Writing
</div>
</li>
for all but the last one.
Add an left: -12px; to the styles of the li elements of the breadcrumb. That would only work if their position is set to relative;
Additionally, for my solution to work, add a PHP or JavaScript for example which add to each element style="z-index: 10;". The script should automatically increase the z-index property. If you are making the blog static etc. with no PHP or JavaScript set the z-index manualy.