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.
Related
after I’ve been looking for a similar question to solve my issue, which was unsuccessful, I am now addressing to the community for help!
On my portfolio-website https://www.signz-fiction.at (umbrella quantum template) there is a preloader which doesn’t go away on mobile devices after you refresh the page (or press the green logo on top).
Although it is not an optimal solution for me i tried to disable the preloader under custom css but this did not work either
#preloader{display:none !important;}
Or
body > .preloader{ display: none; }
Though I am ui designer, I have only basic knowledge in web development and so I don't know how to fix the problem.
Grateful for any help, thx!
Ps:
The website is a bit older and there was a problem with the google font when i switched from http to https.
Could it be that the prealoder-thing is also related to the switch?
I think you may be confusing the loader animation with a preloader (which pre loads images and other assets to make them readily available).
On your site, the loader animation element has the class .loader, I've looked at your site with View-Source and haven't seen any element with the .preloader class
Try:
body .loader {
display: none;
}
but note that this might not help because the loader is controlled by JavaScript which might remove this property on page load.
Also, you have errors on your site:
mixed active content - avoid using http:// on your https:// site
a JS error you should look at, that may be the reason why the loader isn't being removed on time
I am using Wordpress.
When I switch to RTL language (Arabic) I have a big empty area between the nav-bar and the body on mobile.
This works properly on other browsers, and even the google responsiveness test, but not on chrome (mobile and pc).
You can check attached pictures to see the probelem, however this is the website if you wanna try it BYS : Broken Website
It might be due to a template or a widget that doesn't support RTL causing this. I played with your site's CSS in Chrome dev tools.
Try adding the following CSS:
body {direction: ltr !important;}
body > div.wrapper {direction: rtl !important;}
See if it fixes your problem.
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 2 questions
how come does my css resets after using certain css code?
how come products other then on homepage is not showing in the middle on mobile
website url : (www.thevapeboys.co.uk)
I have a wordpress website with woocommerce installed I wanted to make mobile friendly so I installed a plugin called wptouch, I have added certain css values to it to make it more mobile friendly these are
these css script only triggers when someone from a mobile goes on the website
but the problem is I have carousal on the website which has next/preview and it dosent show the arrows for it so I tried adding this code to the css
.owl-nav .owl-next::before {
content: ">";
}
.owl-nav div::before {
content: "<";
}
I tried it with firebug and it looked all friendly but when i actually put the code in it resets all the other css values that i did before.is there a way it works without resetting the other css values because it works with firebug
when I go on shop the products and the font is coming on the left now i m not sure how to make them position all of them in the middle so it could be more mobile friendly.
Unfortunately the custom css file is first in line, which means it won't ever override anything. CSS works with a cascade meaning the last duplicate class wins out, according the browser. Put your custom css last and it will override.
You shouldn't need the WP Touch plugin as your theme is already responsive, in fact it's duplicating the mobile menu so I'd turn it off. https://woocommerce.com/storefront/ (search for the "Responsive" description box for proof of this)
Do the following to replace the icons, you need access to your custom javascript file: https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous
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/