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/
Related
On my website, when I show adverts on mobile, I get an odd yellow rectangle obscuring the right-hand side of my Google AdSense:
That's my own wobbly question mark in the the yellow space, and I've fill-flooded the background to make it stand out more.
I've examined the styles through the Chrome Developer Tools window, but I cannot find anything set to yellow in the style hierarchy, and I'm using mostly the bog-standard minileven WordPress-supplied theme. What could be causing this? How can I correct the CSS to get rid of this? Ads look fine on the desktop version, only mobile.
A typical page is this one.
Looking at your site and viewing an Ad I do see some extra spacing (the one I viewed is different than the one in your screenshot)
When I view the DOM this is the code that is causing the extra spacing:
<td class="rh000c">
<div class="rh-box-empty rh000"></div>
</td>
Here is the related CSS:
.rh000c {
height: 102px;
padding: 0;
width: 2px;
}
.rh000 {
background-color: #ffffff;
display: inline-block;
height: 102px;
overflow: hidden;
padding: 0;
width: 2px;
}
For some reason the Ad is passing this code into its iframe so I don't think there is much you can do to remove it. (Well, there might be ways to remove this code but you might violate your service agreement with the Ad agency if you do)
If I were you I would contact the Ads company you are using (it seems that you are using Google Ads) and ask them about this issue directly. Hope that helps.
I had another closer look at the problem, and for some reason or other there is a rule like this:
embed, iframe, object {
width: auto;
}
For some reason that I can't work out, this overrode the explicit <iframe width="320", so by trial and error I found that adding this to my custom CSS:
.mobile-theme .adsbygoogle iframe {
width: inherit;
}
Overrode the width: auto; and I now no longer get my yellow border. There's still a bit of an ugly yellow border at the link widget at the bottom, but at least that's not obscuring anything, so I'll ignore it for now...
I am having a lot of trouble getting my button in a BigCommerce theme to vertically align to the bottom. Since it is a responsive design, absolute positioning doesn't quite get the work done. Unfortunately it is the only thing that seems to move the buttons at all; I've tried all sorts of methods with relative positions and the vertical position will not budge. It seems that the products are listed within a list that functions as a table.
Here is the css for the button itself. I added the stuff below "border" and have tried many different ways as well as tried changing display to inline-block.
.product-grid .ProductActionAdd .button {
display:block;
background: #424546;
border: 1px solid #303334;
position: relative;
vertical-alignment:bottom;
bottom:0;
}
I can provide css for the other parts as well. Below is basically what I'm trying to fix. Those with 1-line product names would have the "in stock" button moved up.
image of buttons and problem
Without the full HTML/CSS or a jsFiddle it's going to be difficult for me to provide you with the complete HTML/CSS solution, but here's what will fix the problem:
Wrap the button and description inside of an element and set position:relative on that wrapper element
Give the buttons the following style: position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
Set the description to a fixed height and give the wrappers a fixed height
That should solve your issue. Here's an example
On my Website Homepage I inserted a grey strip container containing social network links. I want it to go all the way to the edges of the page like my footer.
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
margin-left: -178px;
padding-right: 349px;
position: relative;
}
I know it's an amateur attempt, can someone show me a better way to code this? At the moment when zooming out it detaches from the edges of the page.
Will need to see the html also
Maybe try taking away the margin if that div isn't contained by another one
I'm looking at your site, and I'm not so sure the problem is with the CSS that you've printed out for us.
Your social networks strip is inside a section tag with class ".wrapper" which is set to width 1640px, and the strip is adjusting to the width of that wrapper. Is there a reason you've set that ".wrapper" class so wide?
Your footer, on the other hand, is not inside that same "section.wrapper" element, so it is adjusting to the width of the browser.
I want the gray background to continue all the way to the height of the current window. I tried setting height to 100% of #default-wrapper-body, but that doesn't appear to do anything.
See it live here: http://www.zorgbeurs.nl and even more prominent here: http://www.zorgbeurs.nl/aanmelden
I've also added an image, the areas in the right boxes should run to the bottom of the page, on all pages, not just the homepage.
This is happening because the browser can't detect the height of the footer for one reason or another, also your not use a wrapper on all elements, a quick fix would be to add the following CSS to your stylesheet:
#footer_footnote_wrapper {
height: 80px;
border-bottom: 1px solid #DCDCDC;
}
html, body {background:#f3f3f3;}
html, body, form, #default-wrapper-body { height: 100%; }
… does the trick, see here: http://codepen.io/zitrusfrisch/pen/ouEdI
Better move the form inside the #default-wrapper-body to prevent all forms being stretched to 100% height though.
I think the cookiebar div is causing your white stripe at the bottom, it has background:none; and when its visible the background looks fine, all the way to the bottom.
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;}`