Hi,
sorry for the unspecific title but it's a bit more than one challenge I face.
With the help of this forum and Chrome's element inspection I was able to do most I wanted. I'm a pseudo CIO but not a CSS and JS coder.

Maybe a additonal info: to improve the speed of my site I installed W3 Cache and subscribed for the free version of cloudfare. Through this forum I found Async JS and css. Minification through cloudfare so far didn't work. This info as it may not be the theme but the configuration I have:

1. I have some errors
Uncaught ReferenceError: jQuery is not defined
jquery-migrate.min.js?ver=1.2.1:2
Uncaught ReferenceError: jQuery is not defined smooth-menu.js:21
Uncaught TypeError: undefined is not a function
javascript.js:252 Uncaught TypeError: undefined is not a function

2. My site doesn't work at all on tablets/smartphones. It would randomly load a different theme (which all I have deleted now)

3. It won't show the featured images on the front page, only when I login to WP as admin I can see them else I see white spaces.

For the handheld devices is it recommended to use the jetpack mobile them ?

thanks for any hint

EDIT: Disregard cloudflare, just deactivated and will setup dropbox

Did you intentionally remove the grayscale thumbnails? That is, by default, Montezuma will show grayscale thumbnails on the blog/index page, which turn color when hovered over with the mouse, but your site isn't producing them. I'm wondering if you did something intentionally to do that.

I see, however, colored thumbnails on your site if I use Firefox or IE, but not on Chrome. I think the Javascript errors have something to do with it. Is Async JS a plugin? Can you try disabling that to see if your thumbnails look OK? By the way, your site loads OK for me on my iPhone5 and my Kindle.

Also, you should remember to include a link to your site whenever you start a thread so others will have an easier time finding it.

http://www.dinckol.com/

Hi,
thx for replying.

I assume you are referring to this code in posts.css where I only changed the backgr color to fit the overall color layout but shouldn't have touched the grayscale filter and shadow image. Yes deactivated the plugin and errors are gone.

/*****************************************
POST THUMBNAIL
<div class="thumb-shadow"><div class="post-thumb"><a><img><span></span></a></div></div>
******************************************/

.thumb-shadow {
background: #e7e7e7 url(%tpldir%/images/shadow.png) center 50px no-repeat;
padding-bottom: 5px;
margin-top: 7px;
margin-left: -6px;
}

.hentry:hover .thumb-shadow {
background-position: center bottom;
}

.post-thumb {
margin: 0 auto 15px auto;
display: block;
padding: 6px 6px 5px 6px;
border: solid 1px #ddd;
border-bottom: solid 1px #ccc;
background: #e7e7e7;
}

.post-thumb a {
position: relative;
display: block;
}

/* .img_wrapper added & wrapped around <img> by Javascript */
.post-thumb .img_wrapper{
}

.post-thumb img {
-webkit-filter: grayscale(0);
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5 0)";
display: block;
}

.post-thumb img.img_grayscale {
filter: grayscale(100%); /* Current draft standard */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%); /* opera */
filter: url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
}

/* Container for the shadow. Parent is position:relative. Putting it "on top" of image */
.post-thumb span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 15px 15px 20px -20px #000; /* inner shadow top and left */
z-index: 20000;

No, I wasn't referring to the CSS, but was wondering if you had made any changes to the header.php subtemplate. Glad to know that deactivating the plugin made everything work again. That's one of the first things you should check if your site starts misbehaving: Start by deactivating plugins.