Bootstrap not working in Magento theme - magento

I've got a silly problem. It's probably just down to me not being able to see the wood for the trees... one of you geniuses might spot the problem immediately, or at least I hope so!
I've developed a theme for a Magento site using Bootstrap. First I built static HTML templates, which were tested for responsiveness, and they all worked fine.
I then integrated those templates into Magento... and the responsive elements stopped working. They were working initially, but at some point during the site development, they stopped working.
I've looked and looked at it and I can't see what's wrong. I presume there's some sort of conflict with Bootstrap somewhere but I just can't see it. There are no script errors that I can see and everything is loading correctly, but the responsive elements refuse to work.
Can someone take a look at the site at http://www.collaredclergywear.co.uk/ and tell me what I'm missing? I think it's probably something simple but I can't see the wood for the trees anymore.
Cheers,
Willo

One thing in style.css try commenting it. better remove style.css completely and test
.wrapper {
min-width: 954px;
}

Related

Nativescript-vue implement font icon not working

I'm struggling on how to implement font icon in nativescript-vue, I decided to use font-awesome 5 and followed a bunch of different tutorials, unfortunately, It still now working for me. Some devs have an output of a question mark, but for me, nothing is displaying. I've been stuck on this task for a long time now. I would really deeply appreciate some help.
Thank you :)
I'm using:
Typescript-vue-decorator
Nativescript v6.4
This is one of the steps I have followed thoroughly
NativeScript + Vue.js + FontAwesome
Output
Total rookie here, but I was having huge drama getting it working. I reverted to using FA4.7. Still no joy. Ran up a Playground instance and the darn thing worked.
The only thing that was different for me was that my local default app.scss file started with these style references:
#import '~#nativescript/theme/core';
#import '~#nativescript/theme/default';
Whereas the playground defaults to the actual css files:
#import '~#nativescript/theme/css/core.css';
#import '~#nativescript/theme/css/default.css';
I updated my app.scss file to use the above css references and hey presto, font-awesome icons work. I have not gone to the effort of retrying with FA5 but its a good chance this might be the trick.
I hope this helps someone else. All the best.
The playground instance is available here.

Strange issue in page speed test in wordpress site

i have a strange problem!
My site score at "tools.pingdom.com/fpt" is 99 which is really great and i have done a lot of work to get that. so, i installed a plugin "Google Language Translator" and did a test again but the score drop down to 76!! Please see the screen shots
Before and After
Also, i did combined and minified all js and css files into my main theme without any problems but the problem still remains.
Now when i deactivate the plugin the score goes back to 99!.
Would you guys please help?
My site is www.elhafez.com and now the plugin is deactivate.
Thanks
OK, there is no specific answer but you can fix some speed performance.
1- i fixed the "Parallelize downloads across hostnames" by creating 2 sub-domains and added them as a generic CND in W3TC plugin.
2- Combined the plugin JavaScript into 1 file and moved the CSS files into main theme style.css
3- There are many code errors like Duplicate ID's and missing end tags, etc .. i fixed them Manually.
So, after all i raised the page score from 77 to 92 with CloudFlare activated.
However, the plugin is great and really useful and it doesn't effect the overall page speed, only the page speed rank and HTML validation if you care about that.
Thank you all.

Unable to scroll down

I'm struggling on my website which worked well since the shareaholic widget install. I've tried to remove it but the bug remains.
A picture is worth thousand words so it's about : www.mywebshop.org, we can't scroll anymore on the website and I must admit I've never seen that bug (except when using fixed position ;-)).
I'm totally stuck... no cache is active, I can't see anything out of the ordinary... I'm having this issue on every browser on my mac.
Any clues?
Thank in advance ;-)
hey there I have seen your site. Please remove the overflow-y:hidden; from the body selector in the style.css file on line number:2793
That should do it

Google Recaptcha: Weird graphic glitch?

I just implemented Google recaptcha on a site and it appears to be having a weird graphic glitch under the box itself.
You can see a picture here:
As you can see, under the captcha there's some glichy looking lines. Does anyone know a way to get rid of this and or if it's supposed to be there? (I don't think so, but the implementation code is taken directly from google themselves).
I had the same problem and figured out that the line height of 20px that I set for the body tag in my CSS file was the culprit. Try this, it worked for me:
.recaptchatable * {
line-height: 4px;
}
For me, I had to choose a THEME in the implementation of the recaptcha instance on a form building widget for wordpress. It was not indicating ANY theme when it was displaying weird. I seleceted "clean" and it works nice.
Example

Background images are not being referenced correctly

Ok, first off, I know that the code referenced below has to do with a Joomla! site, however, I have had this problem on more than one site, not all of them using the Joomla! framework.
Now the problem:
I have some background images that are being referenced in my CSS stylesheet as:
background: url(../images/j_header_middle.png) repeat-x;
However, when the page is loaded into the web browser it is being referenced as:
background:url(http://64.19.142.11/www.outoftheblueinc.net/administrator/templates/bluestork/images/j_header_middle.png) repeat-x
I have done some searching on the web and have not been able to find a proper explanation as to why the images are being referenced this way. If I go into the console and remove the IP address from the file location it works just fine. I just have no idea why it is being added to the file location in the first place.
Any constructive ideas as to why this is happening are welcome.
I was wondering if you've found a satisfying explanation for this. If not then at least this post will serve as more data. My website recently had this problem too. In my javascript, I linked with the google hosted version of jQuery UI 1.8.18. Everything seemed ok for weeks until today when my browser kept trying to connect with 64.19.142.11. This link is the culprit.
http://64.19.142.11/ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/cupertino/images/ui-bg_highlight-hard_100_f2f5f7_1x100.png
That png file is an image resource specified by jQuery UI. I only started to see the problem today and I can't be sure whether it just started happening or the host with IP 64.19.142.11 recently went down. For weeks, jQuery ui 1.8.18 works fine.
Finally, after downgrading to 1.8.17 the problem seems to go away (no weird IP injection).

Resources