Images are streatched in the blog - javascript

I have a blog which has few posts with images. Recently a few weeks ago, I found that the images of the home page are streatched as follows which were absolutely fine before.
Is this a problem with CSS3? I am not much aware of that. How can I edit CSS and Solve this issue? My blog is http://insiderattack.blogspot.com/
Thank you.

Your images are initially fine and not related with css, instead it's because of some javaScript file that you have probably added recently, try to disable JavaScript and load the page with JavaScript disabled, it looks fine. Here is an image of your site, i've loaded it with JavaScript disabled from Google Chrome browser.

Related

Javascript and CSS not working after uploading the website online but they are working fine locally

Here is the site in question http://www.rfindings.net/
I have uploaded the code to github - https://github.com/Shaivik7/rfindings
Now the home page has 2 images that should be switching every 4 secs which is not happening online but working fine offline.
If you see any missing semicolons I have fixed them and tried again but nothing changes.
And for CSS part I have wrote the media query according to resized browser but the site looks completely different on mobile, I used media query for anything less than 768px but still on mobile it looks completely different.
I am beginner so I hope my code isn't too messy if it is I apologize in advance.
I am hosting this site at namecheap
If you have to time please take a look.. Thanks

How to troubleshoot a white flash between page loads

I'm working on a website, and it flashes a white screen between page loads, every time I click a link. I've read a lot of other posts on similar issues, but each scenario looks to be different. How do I best go about troubleshooting where this flash is coming from?
The site is using WordPress, custom built from the Genesis Child Sample theme. I'm not greatly versed in the Inspector tool. Anything I should be focusing on in reviewing/testing?
This issue ended up coming from an animation I was unaware of on the .site-container. I removed this CSS, and the issue was resolved.

Problem rendering image inside the amp-truncate-text tag

I am having a problem with AMP.
I'm trying to implement a read more button, but when there are images, videos, advertisements in the amp-truncate-text tag, it doesn't load the images, it gets a loading icon, but without showing the image.
I made an example using the AMP playground using the following code as an example.
Has anyone faced this problem and has any idea how I can solve it?
amp-trunkcate-text ist still in the experimental status. DO you have enable the experimental status?

Javascript code loading issue with IE7 and IE8

The website in question is cpavalet.com
My javascript loads fine on all browsers except ie7 and ie8. For a few hours now I have been trying to debug the issue to no avail.
I am using jQuery and modernizr, and using the supersized library for the full-sized background images.
The weird thing is, sometimes when I load the page it loads correctly, other times the javascript doesn't work on the page. I think it has to do with the order the scripts are loaded. I am using document.ready for my jquery scripts.
Can anyone shed some light as to why it's not working correctly in ie7 and ie8? I am currently using ie8 for testing purposes.
I am using javascript for: image slider on home page, full-size background images, back to top link to slide to the top, and form validation.
Thanks!
Corey
My guess as to why it wasn't loading correctly was partly correct. I thought that it was because of the order I had my scripts being run on the page.
The answer is that I was using the defer attribute when loading my scripts. When I removed the defer attributes, the scripts started working correctly again.

How can i stop IE hanging whilst loading Facebook Social plug in (Like box) on my site?

I have implemented the Facebook like button on my site by using the asynchronous JS SDK and it's working great! However it takes a long time to load, which is not a great problem (Would be nicer if it loader quicker though..) as the rest of the page loads fine.
However, if your view the the site in any version of IE the whole page is unresponsive until Facebook Like / comments have loaded... All the images and other scripts are loaded, but the whole page is locked.
Any ideas on how i can rectify this for IE users?
I have seen this post: How do I keep the Facebook like button from delaying the loading on my website? but this was solved by using the Async version, where as mine IS using this and still hanging?
If it helps I can post a link to my site / page that it appears on?
Well, my only advice here is to place your FB JS code just before the </body> tag. But I have other "tips" for your site in general.
Try to minify/combine your CSS and JS files when possible
Try moving your JS code to the body tag (at the end)
Do you really need the Prototype AND jQuery libraries?! try removing one of them and port the functionality to the other (almost all tasks can be done with either library)
In the end, IE was hanging because I had a CSS3 transform on my images and apparently this slows down IE (Even though it cannot render the transform. So i can disable by this via conditional comments in the CSS or in my case modernizr.

Categories