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
Related
I have a very odd instance in that my main Google Chrome browser is prioritising the wrong css.
I am using WordPress with Elementor and Astra on a Siteground Server. I have tried clearing both the browser cache, server cache etc...I even tried clearing Google Chrome cache via the settings.
The issue only happens on this Google Chrome Setup, works on another Chrome instance (including Incognito) and for Firefox and Edge etc.
This is the code that should be working
.elementor-button-wrapper .elementor-button:hover, .elementor-button-wrapper .elementor-button:focus {
color: #ffffff;
background-color: #062950;
border-color: #062950;
}
And this is the fallback style it is using:
.wp-block-button .wp-block-button__link, .elementor-button-wrapper .elementor-button, .elementor-button-wrapper .elementor-button:visited {
color: #062950;
}
The above code actually has a strikeout on it in the inspector but the right code is used when I tick to disable this code.
I have had this issue on Cloudways before when Varnish caching was being used.
Does anybody know off the top of their head what it could be and whether there is an underground way of purging the entire Google Chrome cache for a specific site? Many thanks!
So I found the problem which was really rather simple and probably so simple I didn't think to look.
The style was active for that element but crossed out in the Google Chrome inspector. It was bewildering why unticking an overridden style would fix the issue. The reason was that part of that style rule included the :visited (but it was classed as an inactive element).
Simply put, the browser history was the reason and I had to create an additional style to to offset the visited link from taking preference. I hadn't even considered whether the link was visited or not.
.wp-block-button .wp-block-button__link, .elementor-button-wrapper .elementor-button, .elementor-button-wrapper .elementor-button:visited {
color: #062950;
}
Example, it was the .elementor-button:visited that was creating this mess, and I was only look at .elementor-button-wrapper .elementor-button which was the active element.
I don't know if this will help anybody but considering other states beyond :hover is important when debugging odd issues like this!
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
#recaptcha_area, #recaptcha_table {
width: 280px !important;
}
default width of captcha is 318px. I want to decrease its size to 280px.
But my css code is not working.
Well your question is proberbly too broad because you did not tell which captcha software you are using and how your html does look like.
Just some general hints:
If you use recaptcha (which I guess by the css classes) you cannot customize the captcha, because it loads a iframe which you cannot control or modify. This behavior is caused by the same orgin policy, which prevents accessing pages from other domains.
The only hack I could guess is using the zoom attribute, but I'm not sure and I never tried it on iframes.
Alternative you could try using transform:scale(x) which should work, however I never got good results with transform yet.
So, I've pretty much completed my newest project utilizing Twitter Bootstrap and I'm going about fixing some issues that are buggining me, and I can't for the life of me understand why I piece of code is working on FF but not in Chrome so I was wondering if you guys can help me out a bit...
Mainly, I'm using the following to allow dropping of menus by hover, not click.
https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
Can someone give me a bit of direction as to why it's not working in Chrome?
The site is: http://www.savamarkovic.com/dal/index.php/?lang=dal
FYI, you can achieve a clean dropdown on hover using this simple css block:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
This will save you the overhead of using an extra js plugin and it works in all browsers. Bonus: clicking on the main menu item will lock the dropdown open, per the standard implementation of the bootstrap dropdown.
GitHub doesn't want files to be served from raw.github.com, so the MIME type is text/plain, which is preventing it from loading in Chrome...try including the script locally in your project.
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.