I'm coding a responsive website and it is the first time that I'm using Facebook Comments tool. Everything is correct except when I access it on mobile.
Facebook Comments generates a new stylesheet for mobile. I'm looking for some code that disables or ignore this new stylesheet.
Screenshots...
- on desktop
- on mobile
You can add CSS of your own to over ride the FB css and make the comments box responsive. Just add this to your CSS
.fb-comments, .fb-comments iframe[style] {max-width: 100% !important;}
Got it! To disable the stylesheet for mobile, we must insert a new attribute (mobile="false") in HTML code.
<div class="facebook_comments">
<div class="fb-comments" data-href="http://example.com" data-mobile="false"></div>
</div>
Thanks a lot!
\o/
Related
I would like to ask how can I, or if it is even possible to customise css of facebook comments box. I have tried this CSS, but it didnt work.
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;}
Is it even possible to modify the comments box?
Thanks for any reply.
No, that is not possible. Those plugins render as an iframe that loads its content from a different domain, so you don’t have access to it via your own JavaScript or CSS.
The settings mentioned in the documentation are the only way for you to configure how this plugin behaves and looks, https://developers.facebook.com/docs/plugins/comments/#settings
I have a system in css that changes some of the page if you are on a mobile but there is only so much that you can do with css and I was wondering if I could use css to redirect the user to a mobile friendly pagethanks any help would be appreciated.
What you're looking for is not redirecting the page with CSS, but rather changing the styling of the page with a CSS selector based on the screen size. You could do this with CSS's media_query selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have no experience on any programming or webdesign but I had to revise a free html5 template for our website and I tried to add facebook plugin on it, the social plugin works fine in desktop version but width is static in mobile version, I have read other answers such as:
Is it possible to set a fluid width for Facebook's social plugins?
but I do not know where to add below codes recommended by other members.
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
here is our website: www.olympfitness.mn/4
Please tell us how we get it work on either desktop and mobile version, thank you and sorry for the broken english.
You can directly add the code from here https://www.addthis.com/dashboard#gallery/ for social share and like.
I am new to Android and jQuery Mobile.
I am using fullcalendar in jQuery Mobile.
as you can see the event title is bold and blur,
the fullcalendar header also not fits perfectly when test at Samsung Galaxy II.
The original fullcalendar fonts is nice and sharp.
If I test remove this jQuery Mobile theme css it will work fine, I guess is jQuery Mobile css crash with fullcalendar css. Sorry, I have not much experience in css.
<link rel="stylesheet" href="http://dl.dropbox.com/u/41465102/android-theme.min.css" />
So, please guide me
how to make event title font exactly like the original
the full calendar header is fits perfectly in mobile
For fixing the event title font,remove the text shadow from it using the following css:
.fc-event-title{
text-shadow:none;
}
Updated fiddle - http://jsfiddle.net/JaaQg/5/
On Diveboard, we made a nice hack of photoswipe to support videos
Everything went well until I discovered Firefox 11 and 12 beta are not playing the youtube videos embedded any more... it seems they are loaded, we can hear sound ad pufff no images... so it's youtube radio instead
you can see an example here : Video example page
And i've been scratching my head over and over on that one but I'm clueless :( :(
EDIT : Apparently it's an issue ONLY ON OSX!!! which makes me even more clueless...
Any hint would be apreciated
the iframe code is pretty straightforward:
<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe>
What CSS styling are you using on your iframe? http://argylesocial.com used border-radius on youtube html5 iframes, and removing those style declarations resolved the problem.
I had to remove both -moz-border-radius and border-radius the get video to properly display. Works like a charm now!
It's actually a FF bug which is now fixed on mozilla 12 /13/14
http://ksso.net/~alex/ff_bug/moz-transform.html
I was getting the same issue on my website blog I am developing, I added height for the iframe as Firefox was not grabbing the height from the height tag in iframe, the solution is either add the height using style tag, but if its a responsive website use the media css for the iframe tags height. The example might explain it better.
If using a fixed height for the iframe then try adding style tag to the iframe as in
style="height:374px"
If responsive site the add the iframe to the media query in css - eg:
#media screen and (min-width: 100px) and (max-width:768px) {
.video iframe {height:200px}
}
and so on.
It worked for me, I hope it will helps others as well.
Thanks!