Bootstrap IMG-RESPONSIVE not working in navbar on Firefox and IE. It was working couple of days ago just fine until I did something (unintentionally) and now it only works on google chrome...
here is the link to the page i'm working on:
http://streatham.trustedlocallocksmith.co.uk/
ps. SORRY for not pasting the code in here! wasn't aware of the actual "mission" of the entire site! will not do the same mistake again! PROMISE!
The current .img-responsive class is set to max-width: 100%. You should be able to add a line to override this in your myextras.css, so that you have .img-responsive {width: 100%;}.
Related
Having a small issue getting my site to behave in safari.
Some specifics.
I am using safari for windows v5.1.7 but the issue is also present on ipad.
The issue i am having is the positioning of 1 element, which is only happening in safari, it is a small drop down so users can select currency, this is placed in my WP theme via the header.php.
The code i am using is
<div class="currencytop" style="right: 85px; top: 6px; width: 9%;"><?php echo do_shortcode('[woocs]'); ?></div>
I have had to style the code to get it to a position i was happy with and it looks OK in all browsers except safari.
You can see the offending element on my homepage here (top right on chrome but shifts under the social icons in safari) http://escapeandco.com/
Any help on correcting it would be greatly appreciated
Thanks
you can detect browser and run different css for safari ,check out that link how to detect browserenter link description here.
Here is the link for our wordpress site http://www.dotmappersdesign.com/caramaintaince/.
We have a compatibility issue with internet explorer and mozilla firefox. We tried few methods to solve, like
1) Creating a separate css file ie.css.
2) Writing version code in header.php ( )
But the issue is not fixed.
All your answers are appreciated.
Please changes the css line in logo class width 150px issue solved in mozilla firefox and IE.
On the insurance-repairs page that is happening because of the span8 class, remove it from the <div class="span8 right" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php"> div and it should display fine.
The issue on the authorized-repairs page is happening because of right: 250px; on the <ul> that, remove it and it should fix it.
Background
I've built a responsive website template. I've chosen to use Bootstrap 2.3.2 because it needs to work in IE7+ and be suitable for mobile devices. I've used respond.js and html5shiv.js so that it will work in IE.
Problem
The site works beautifully in Chrome and Firefox. And it displays well in IE8. However in IE8 it's incredibly slow. Even after the page has finished loading the browser freezes up if I try to scroll down or click on something. It looks great but the slow response time makes it virtually unusable.
Cause of problem
I've identified that Bootstrap.min.css is the cause. When I remove bootstrap.min.css from the page and leave everything else the same, the styles don't work but the page loads quickly and it's very quick to scroll up and down and click on buttons.
I think (or rather I hope!) that the cause is not Bootstrap but rather because I'm using the responsive elements of Bootstrap (e.g. row-fluid). I'd like to keep the site responsive for all non-IE users, but I'd like to try making all widths fixed for IE8 users and below.
Attempts to fix
I've tried overriding the percentage widths in IE by creating a conditional IE stylesheet. However it doesn't appear to be possible to override the media queries, even using !important (example below).
HTML
<div class="row-fluid">
<div class="span10 width7">
</div>
</div>
Bootstrap
This is an example of what I've been trying to override.
#media (min-width: 1200px)
.row-fluid .span10 {
width: 40.92827004219409%;
}
CSS to override Bootstrap
The code below is not able to override the bootstrap css above.
.row-fluid .span10.width7{
width: 485px !important;
}
Question
Has anyone got any suggestions about how I might adapt my template so that it continues to be responsive for non-IE users but has fixed widths for IE8 and below?
Many thanks,
Katie
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/
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!