Hi Ismael,

Thank you for the explanation. Unfortunately, the code provided did not make any change whatsoever.
I believe that if we move down the last row by 1 pixel the problem is fixed. I am talking about the “zawya” logo.
Is there any chance the whole square / grid moves down by 1px?

Thank you

Hi Andy,

The code did not change the area I was asking for. It changed the image area padding around the logo in the grid, but nothing changed on the lines.

I am sending you this sshot: http://dns.d.pr/1bkOa/5WytPu4w
All I am asking is to have the lines even, and the 4 intersected lines perfectly aligned (which aren’t if you look closely as this sshot: http://dns.d.pr/oc0C/2kd7D8Zd )

Many thanks.

Hi Rikard,

Please check Enfold demo which has the same problem: http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/page/2/

This is the screenshot zoomed with the intersection that has the alignment problem: http://dns.d.pr/1g0Kh/RFKQZLH6

Thank you

Hi Yigit,

Thank you for this solution.

Is there an alternative solution to add this effect to ALL images without applying a custom CSS class?

Thanks.

Hi Ismael,

Thank you for the update, however, nothing really changed apart from the container being now 100% width (which we don’t like).

We would prefer to keep it as the original / default one in terms of size / width / style.

I removed the code provided by the plugin’s author and now it is all a big mess as you can see below in private.

Any chance to provide me the CSS lines for enfold to use WHMCS CSS?
Many thanks.

Hi Ismael,

Thank you.

Please check my message in PVT and also confirm what was changed exactly? Only the functions.php file with all this code?

// remove img title
add_action('wp_footer', 'ava_custom_script_title');
function ava_custom_script_title(){
?>
<script type="text/javascript">
(function($) {
    $('img').removeAttr('title');
    var a = function() {
		$('.avia-gallery-thumb a').each(function() {
			$(this).removeAttr('title');
		});
	}

    a();
})(jQuery);
</script>
<?php
}

Hi Yigit,

Please find the temporary access to a demo WP account below.
When mouse is hover the images, it shows the image meta name. We would like to hide all from all pictures / galleries, etc.

Thank you

Unfortunately the title tags are still showing up. Please check the page in PVT.

I have this in my functions.php file, can I remove all this and get just one single code that removes all the tags from all parts of the website when mouse hover?

function add_custom_script(){
?>
<script>
jQuery(window).load(function(){
	jQuery('img').removeAttr('title');       
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

// remove img title
add_action('wp_footer', 'ava_custom_script_title');
function ava_custom_script_title(){
?>
<script type="text/javascript">
(function($) {
    $('img').removeAttr('title');
})(jQuery);
</script>
<?php
}

Hi Ismael,

The problem is that I will then have to add a #custom-section tag on every colour section, is this right? The website has already dozens / hundreds of colour sections. I was looking for a single code that applies to all.

In summary, I need a code that reduces the vertical space between color sections that does not affect the color section height, just the space between them.

Thank you

Hi Andy,

Let me try to make it clear here.

We are dealing with two different padding issues:

1) The following code is to decrease the space between two color sections (vertically):

.avia-section .content {
    padding: 10px 0;
}

2) I want the height of each color section to be different from one color section to another. This means, one may have no padding at all, the other may have a large padding, etc. With the code above, the padding drop-down option in Avia Builder does not work anymore if I add the code above. The code overrides the padding settings thatI select in the builder.

So… in summary, I still want to keep the space between the each color section but (at the same time) I would like to have each color section height independent.

Does this make sense? If not I will try to send you some screenshots.

Thank you

Thank you for spotting this out Ismael

I used the following code to give a specific space between each color section, not the color section padding:

.avia-section .content {
    padding: 10px 0;
}

Is there a way I can still keep the color section spaces (from 1 color section to the next one) as it is and, at the same time, does not affect the color section contents? A way to blend both please?

Thank you

Perfect! :)

A not-very-related issue but also important, on the same page. When mouse is over the picture, it shows some sort of meta name of the picture (see my sshot: http://dns.d.pr/1cRtZ/1HpLZDMW)

How can we hide all those tags from all images when mouse is over?

Perfect,

Thank you Elliott

Thank you Vinnie,

It looks much more complicated than I though.

I will simply add individual lines of CSS code just to make it easier, one for each ID basically.

Thanks again for the explanation and will keep this in mind for the future.

Hi Rikard,

Basically, I would need the search box (search field) at the far right side aligned with the main menu bar. The field here should basically move up to the bar without the need to click on the magnifier icon itself: http://dns.d.pr/1h3xl/1opakJ8P

In summary, a search field and a search button always visible.

Thank you