Margins disappear between columns on row

[th_koutsaft]

Hello team,

After adding links to internal pages on specific columns (using the ID and custom JS query) when displayed on Chrome or Safari (Mac) the rows with links collapse all margins creating misaligned blocks and a messy look.
Any idea how to fix this.
In the builder the error doesn’t show up, only on the front side.

http://officialwebsite.usiproserve.odns.fr/

Thanks for your help.
Best,
Théo

[nabeel]

Hi there,

Thanks for writing in! I see you’ve wrapped your column with an anchor tag, now the anchor tag becomes the parent of the column which disturbs the layout. Try replacing your code with the following:

jQuery(function($) {
   	$( "#marché > *" ).wrap( "<a href='http://officialwebsite.usiproserve.odns.fr/marche/'></a>" );
   	$( "#enjeux > *" ).wrap( "<a href='http://officialwebsite.usiproserve.odns.fr/enjeux-clients/'></a>" );
   	$( "#solutions > *" ).wrap( "<a href='http://officialwebsite.usiproserve.odns.fr/nos-solutions/'></a>" );
   	$( "#faq > *" ).wrap( "<a href='http://officialwebsite.usiproserve.odns.fr/faq/'></a>" );
	$( "#devis > *" ).wrap( "<a href='http://officialwebsite.usiproserve.odns.fr/contact/'></a>" );
   	$( "#appel > *" ).wrap( "<a href='http://officialwebsite.usiproserve.odns.fr/contact/'></a>" );
});

As an alternative solution you can do this with essential grid without needing of custom scripting see some examples https://essential.themepunch.com/even-grid-washington/ or https://essential.themepunch.com/even-grid-monroe/ or https://essential.themepunch.com/even-grid-henryharrison/

Hope this helps!

[th_koutsaft]

Hey @Nabeel,

Thank you for getting back to me.
I tried your fix and the margins issue is resolved, but with your technique only the text acts as a link and I needed the whole column to be clickable. Any way to resolve this ?

Thank you for your help.

Best,

Théo

[paul.r]

Hi Théo,

Please replace js code with this

jQuery(function($) {
   	$( "#marché" ).wrapInner( "<a class='mylink' href='http://officialwebsite.usiproserve.odns.fr/marche/'></a>" );
   	$( "#enjeux" ).wrapInner( "<a class='mylink'  href='http://officialwebsite.usiproserve.odns.fr/enjeux-clients/'></a>" );
   	$( "#solutions" ).wrapInner( "<a class='mylink'  href='http://officialwebsite.usiproserve.odns.fr/nos-solutions/'></a>" );
   	$( "#faq" ).wrapInner( "<a class='mylink'  href='http://officialwebsite.usiproserve.odns.fr/faq/'></a>" );
	$( "#devis" ).wrapInner( "<a class='mylink'  href='http://officialwebsite.usiproserve.odns.fr/contact/'></a>" );
   	$( "#appel" ).wrapInner( "<a class='mylink'  href='http://officialwebsite.usiproserve.odns.fr/contact/'></a>" );
});

Then add this in Theme Options > CSS

#marché, #enjeux, #solutions, #faq,#devis,#appel  { min-height:170px;}

.mylink {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4em 1em;
}

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thanks

[th_koutsaft]

Hello Paul,

Thank you for getting back to me.
Your fix worked perfectly.
I appreciate your help, especially since it’s outside the theme’s scope.
This is why your customer support is so appreciated

Best regards,

Théo

[nabeel]

Glad we could help.

Cheers!