I think .custom-logo class is as specific as it gets for the logo image. But even whilst using !important, the logo is not only not aligning how I want it to, also the inspector is still showing the margin-left: 650px; that I used previously to adjust the position of the logo (this was only meant to be temporary until I would have figured out how to align it properly, which I didnt). See CSS Code, HTML code and the picture of my website:
.custom-logo {
width: 350px;
height: 350px;
margin-left: auto !important;
margin-right:auto !important;
display:block;
}
<img width="719" height="719" src="http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2.png" class="custom-logo" alt="<-MattmArt->" itemprop="logo" srcset="http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2.png 719w, http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2-150x150.png 150w, http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2-300x300.png 300w, http://127.0.0.1/wp/wp-content/uploads/2019/02/cropped-logomatmart2-100x100.png 100w" sizes="(max-width: 719px) 100vw, 719px">
Picture of my child-css style sheet and the inspector
While your CSS shows that .logo has margin-left: auto; and your dev tools show that the style still holds an old value the problem lies within your cache.
Since you are using wordpress you probably have a cache plugin. You will need to clear the cache from the plugin, then clear the cache from the browser.
If you are using a CDN like cloudflare you may need to clear that cache as well.
Also note that some hosts like SiteGround have some very strong caching built into their servers so you may need to clear that out as well.
Sometimes you can view the page in incognito mode or use a different browser.
Hope this helps.
Try restarting your local, and hard refreshing if it has old styles still applied.
Related
I have this JPG image that I am trying to use in CSS as a background-image for a div container. All different images I have tried work, but this one just wont render in the viewport. If I go to inspect element, it shows the thumbnail when I hover over the elements URL.
I have tried everything including:
Putting it in an img tag and giving it a static height/width
Converting it to png and svg'
Compressing it
Scraping the metadata
Using it in a different HTML/CSS file
import image from "./image.jpg";
//using React.js
<img src={image} className="image"/>//<-- doesnt work in img as src
<div className="imageBg"></div> //<-- doesnt work in div as bg
.image {
height: 100px;
width: 100px;
}
.imageBg {
height: 100px;
width: 100px;
background-image: url("./image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Here's the culprit: (its just a 2000x2000 729KB .jpg mockup image edited in photoshop)
Is there something wrong with this image?
If you guys dont believe me, heres the bug in action: codesandbox.io/s/hardcore-kare-212iuy?file=/src/App.js
It works fine when I open that in an incognito window, but if I open it in a regular window…
… the file name in your live example (although not in the code you included in the question) ends in ad0.jpg which is a naming convention that triggers common ad-blocking algorithms.
Don't call it that.
Moral of the story: If an image isn't loading then look at the Network tab of your browser to find out what happens when the browser tries to load it.
There is a high chance of the Image getting Corrupted, try doing a small edit in any editing software (photoshop, or even system default apps) and save it again and try using it!
You can also simply take a screenshot of it and try using it in your code
If that doesn't work, you can use this link https://i.stack.imgur.com/LGYHM.jpg in your src as a string, this is the image uploaded to Stackoverflow's drive and test it for time being! if that works as a permanent solution create an account and Try Uploading it to a Cloud Assert Provider like Cloudinary and add it as a Link in the src
I've tried several times and several ways, but can't figure this out. The below set of images load perfectly in non-firefox browsers, but ALL of them are invisible in firefox. If I bring up the document inspector and hover the mouse over the url, the images pop up for only google and email (which are the only two that don't have that weird class on them).
So I guess the question is: why is firefox adding a weird class to my images (just these, all others on the page work fine) and why don't any of them show up in this area?
<div id="share_icons">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/facebook.png" id="share_facebook">
<img src="http://localhost:80/graphics/share/google.png" id="share_google">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/pinterest.png" id="share_pinterest">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/tumblr.png" id="share_tumblr">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/twitter.png" id="share_twitter">
<img src="http://localhost:80/graphics/share/email.png" id="share_email" pop="Send a link to this list to friends via e-mail. <b>Note:</b> recipients must already be users of the site or your view settings must allow public views for them to see it!">
</div>
Here is the calculated CSS of the #share_icons area:
#share_icons {
width: 150px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
* {
border: 0px none;
margin: 0px;
padding: 0px;
font: inherit;
vertical-align: baseline;
-moz-box-sizing: border-box;
}
Another thing I noticed, when I click on any of the images in this area, the pop up box for the inspector which usually hovers over the element where it is on the page is at the top left of the screen as if the images are all off screen somewhere.
Already tried clearing the cache completely. Also tried manually loading the image urls in Firefox and the images load and display fine if I do this. I've also moved the image tags to other places on the page to make sure this isn't a nested CSS thing.
Sorry to jump in so quickly, but I noticed something odd and FINALLY discovered the reason. Adblock was blocking the images most likely because I had accidentally clicked it and filtered it out.
I'll leave this question because it may be helpful to others.
Disable AdBlock for that current page you load. Image gets displayed after refresh. I just tried it and it is working.
I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB).
Because the gallery takes a while to load (25 seconds on my computer, tough it depends on the connection), I want the visitor to know the gallery is loading, hence the Ajax loading GIF.
I want the visitor to see the loading GIF as soon as he enters the gallery page, until the the gallery images have been downloaded and are ready to be viewed.
In order to achieve my goal, this is what I've done:
This is the beginning of the body of the gallery HTML page:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
And this is the gallery CSS part:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
So basically, the loading GIF should be downloaded as soon as a visitor enters the gallery page, because it is the first object inside the <body> that is going to be downloaded. However, it's not visible due to the hiddenPic class.
This method should help making the loading GIF ready and visible as the gallery background as soon as possible, until all the gallery images have been downloaded and the gallery is ready.
However, the loading GIF doesn't work properly on Google Chrome; it works perfect fine on Firefox & IE (spinning flawlessly) - but gets stuck (doesn't spin properly) on Chrome, from the moment it appears until the gallery is ready.
Update: I know I can implement a better gallery (like the ones suggested in the comments) which would require less resources from the user when entering the gallery page - but I don't understand how this can be the cause for the problem when the GIF loader works perfectly on Firefox & IE.
Why doesn't the Ajax loading GIF work properly on Chrome?
You just need to delete this declaration on line 602:
background-attachment: fixed;
I also had the same problem. The way I fixed it was to put the loading gif in it's own element (to keep markup clean, use a pseudo element).
Now, instead of using the background-attachment rule, you can use position: fixed. Here's the code you should use (assuming you'd like that loader gif to sit right in the middle of the screen):
#gallery:after {
content: "";
background: url(images/ajax-loader.gif);
position: fixed;
top: 50%;
left: 50%;
width: 50px; /*change to the width of your image*/
height: 50px; /*change to the height of your image*/
margin-left: -25px; /*Make this 1/2 the width of your image */
margin-top: -25px; /*Make this 1/2 the height of your image */
}
Hope this helps!
I'm a strong advocate of using dataURI with base64-encoded images in this and similar situations. What it does is effectively eliminates the need for a separate http request to retrieve the spinner gif, meaning the "loading" animation is immediately available to be rendered. This makes the value of the UX improvement so more valuable than a couple extra kilobytes in overhead - especially since the stylesheet would be only downloaded once and then cached by the client.
This fiddle has the animation embedded from ajaxload.info, having added literally less than 1KB to the final CSS.
Note that this kind of resource embedding is not supported at all on IE7 (but IE7 users have much bigger concerns to address :)
You may try this using jQuery BlockUI Plugin (v2)
Hope this helps.
Personally for loaders i've always done it this way , I do not remember where i read it .. But its always worked for me ..
$(function(){
$('#overlay')
.hide()
.ajaxStart(function() {
$(this).css("display","inline");
})
.ajaxStop(function() {
$(this).hide();
});
});
What it does , is it takes the div with an id of overlay and on any AJAX request that goes out , makes it visible and once the ajax request is complete , it hides it out.
Let me know if u need more code.
Cheers.
In the CSS for #gallery
background-position: center;
Should be
background-position: center center;
You should also try to use jQuery. See http://yulounge.alienworkers.com/photogallery/ for an example.
We've got a really annoying layout problem on our site only in IE (7 & 8 tested), Firefox and Chrome works fine. The problem is on this page:
http://www.foe.co.uk/community/campaigns/climate/rio_resources_33589.html
The problem code is that the report images should appear to the left of the text to the right. We have a simple that contains the item and the a inner floated to the left and another floated to the left too. Both have widths that are less than add up to less than the outer DIV. Here's an example bit of code that isn't working:
<div class="resourceitem">
<div class="resourceleft">
Test LEFT
</div>
<div class="resourceright">
Test RIGHT
</div>
</div>
The relevant CSS is simply:
.resourceitem {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
div.resourceleft {
float: left;
margin-left: 20px;
width: 156px;
}
div.resourceright {
float: left;
padding: 0;
width: 268px;
}
Any help is much appreciated, it's driving me bonkers!
Cheers,
Chris.
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
Remove </a> from the following code It is an extra code (might be a typo) and causing trouble in IE:
<div class="resourceleft">
<img border="0" alt="Rio+20: Is this it?" src="http://www.foe.co.uk/imgs/Rio_-_is_this_it.png" />
</a>
</div>
Note: every <div class="resourceleft"> has an extra </a>
UPDATE - Fixed it.
Ah. Ok found the problem folks - it's was down to my responsive linking code and IE8's Developer Tools showing rules that don't actually apply. The rules for this were in fms-res.css file but this only gets used on Browsers that understand media queries, and have width > 980px. IE8 uses a default. desktop-only file, called m-equiv.css - the rules were missing from this file. The Web Developer Toolbar very unhelpfully shows the rules as applying to the elements from the fms-res.css file, even though actually they don't. I'd forgotten this effect of Developer Tools, we usually see with our print stylesheet (print.css) rules showing, even though they don't apply (unless when actually printing).
Massive thanks for the contributions folks, sorry it was such a stupid fix in the end.
Cheers!
I have a stylesheet for desktops, and another for handhelds. The web page displays some images when displayed on the desktop, but hides those images when displayed on handhelds. The page appears as designed for both desktops and handhelds.
When I check the server logs, I find that the handheld is actually still loading the images, just not displaying them. Is there a way to stop the handheld from loading the images entirely, since it doesn't need them, without having to maintain two sets of web pages? Can it be done using just stylesheets?
Thanks in advance.
Ray Mond
Include the images you don't want to display on the mobile devices as background image. In the browser stylesheet you then can use
.element {
background: #FFF url('image.png') no-repeat left top; /* or whatever */
}
while in the handheld stylesheet you just don't set a background image, so, depending on the exact usage, you could use
.element {
display: none;
}
or
.element {
background: #FFF;
}
However, it won't be possible to remove images you include with <img src="" /> afterwards through CSS rules (just display: none etc, but that wouldn't stop them from loading, as you noticed).
Send your stylesheet per HTTP header before the markup:
Link: <compact.css>; rel="stylesheet"; media="handheld"
Then the most used handheld browser – Opera – won’t load the images. WebKit (Safari) still does, however – even background images for hidden elements!