I think I figured it out. I still don’t know what happened to force the smaller size, but the code below seems to fix the problem:

#top .gallery-item {
width: 100% !important;
height: 100% !important;
}

Hi Ismael,

Thanks for the tip. You can mark this closed then. I’m all set!

Will do. Thanks! You can close this thread then.

Hola Josue,

Muchas gracias!!! Thanks so much. I never would have figured that out on my own. I’m glad I know the trick now.

Thanks again for going the extra mile to help!

Saludos.

Hi Josue,

Thanks so much for your insight!

I ran a WC3 validator on my homepage and it revealed a stray end div tag just before the howfar section starts. I wonder if this is causing the wrap all div to close? You can see the result here.

I am running a child theme and the only modifications I’ve made are this one to loop-index and the code below to functions.php.

add_filter('avf_blog_style','avia_change_archive_blog_layout', 10, 2); 

function avia_change_archive_blog_layout($layout, $context){

if($context == 'archive') $layout = 'single-small';

return $layout;

}

add_filter('avf_blog_style','avia_change_tag_blog_layout', 10, 2); 

function avia_change_tag_blog_layout($layout, $context){

if($context == 'tag') $layout = 'single-small';

return $layout;

}

add_filter( 'avf_masonry_excerpt_length', 'masonry_excerpt_length');

function masonry_excerpt_length() {

$excerpt = 200;

return $excerpt;

}

// remove masonry image title

function add_custom_tooltip(){

?>

<script>

jQuery(window).load(function(){

jQuery('a').removeAttr('title');

jQuery('img').removeAttr('title');

});

</script>

<?php

}

add_action('wp_footer', 'add_custom_tooltip');

There are no missing brackets anywhere in the code I’ve added.

Any thoughts would be appreciated! The CSS you gave me works, but if possible it would be nice to fix the underlying problem.

Thanks again!

Perfect, I can’t thank you enough! Works great!

Hi Elliott!

Thanks so much for your quick reply. Unfortunately, removing that title bit didn’t do anything. The title remains.

You can see an example here

Any other thoughts?

Thanks!.

Hi Elliot!

You are the man! You were totally right. I should have suspected it since Cloudflare’s “Rocket Loader” caused script issues a couple years ago with my old theme.

Thanks again for your help and I have now fixed the problem!

Hi Yigit,

Thanks so much for this. Great idea to push the border out as far as possible!

However, below is a video showing the left image that still has the image hover effect enabled, and the right image where I turned it off. The CSS code worked, for the most part, for the image on the right with hover disabled. It isn’t pretty on the left with the image hover enabled.
http://screencast.com/t/XScs5ZMJpXv

I figured out how to disable the overlay entirely, but then with circular images there is a strange square that appears as the image grows, and then disappears after the animation is done. I tried making the image 180×180 instead of 300×300 and it still grew as a square. You can see the problem below:
http://screencast.com/t/zpLiIjDjz81D

Both of these issues are present in Chrome only, not Firefox.

However, in both Chrome and Firefox, my sidebar items behave strangely when the mouse hovers over them. Upon the first hover, the transparency only covers a small fraction of the top of the image. Then, upon the second hover the image overlay appears as it should. Video here: http://screencast.com/t/Z9iGQJTf4U

The site in question is http://testing123.happinessplunge.com

Any thoughts on these strange hover issues mostly related to Chrome, but applying to Firefox as well in the last case?

Thanks so much!

Hi Rikard,

I have reproduced the same problem with Chrome on two different computers, and on one computer it is reproduced in Chrome, Firefox, and IE.

My monitor’s resolution is 1920×1080. When the browser is maximized to full screen I have the problem in all browsers, but when it’s not maximized and is any other size (including full 1920px width) then the problem does not occur. The image size is 1920×847 and I have it set to 50% of the browser height, so it should be fine.

Could this be a bug?

You’re the man, Ismael!

That trick worked perfectly. Daghang salamat nimo!

p.s. Issue is most prominent in Chrome.

Thanks so much, Isamel!

That fixed it. Great news!

Last thing now. Is there a way to change the total height of the header on mobile then? I tried using the code below but it doesn’t work.

@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 85%;
height: auto!important;
margin-top: 5px!important;
}
#header_main {height: 100px !important;}
}

Thanks!

Yes, I tried adjusting the max width value as well as changing the max width to 50% for example. Still not working on a Nexus 5, iPhone 4s, and emulators like this.

If it can’t be fixed I can live with that. I just wish the drop down menu still existed.