Classic feature box padding between title and text

Hi - I’m trying to increase the padding between the feature box title and the associated text below. I tried the following but it didn’t work:

.x-feature-box-title .x-feature-box-text {
  	padding: 10;
}

Can you help? Thanks

Hi there,

The code you are trying to use is incorrect. Please try this:

.x-feature-box .x-feature-box-text {
    padding: 15px;
}

Here are some related links for further reading:

Hope this helps.

Thanks Jade, that worked!

I’m also trying to get the whole box (both image and text) to link. Tried the js from this article here, but it’s not working:

(The js was also displaying as raw code at bottom of page, so I’ve removed it from global js)

Hello @SiobhanH,

Thanks for updating the thread.

Please take a look at the solution mentioned in following thread.

Thanks.

Hi - that doesn’t work either.

Hi @SiobhanH,

I checked the site from your account and I found multiple issue, first, please don’t add this to your Theme Options > JS

GA CODE HERE

It’s an embed code and not a javascript, it contains HTML too. The only part that is javascript is the content of <script></script> block. Please use plugin to embed your google tag, like google tag manager plugin.

The second issue is the // added before your code,

//jQuery(document).ready(function($){
	$(".feature-box-1").wrap('<a href="https://herword.co/about/link-1/" target="_none"/>');
	$(".feature-box-2").wrap('<a href="https://herword.co/community-women/link-2/" target="_none"/>');
	$(".feature-box-3").wrap('<a href="https://herword.co/share-a-story//link-3/" target="_none"/>');
});

Please remove //, it should be like this

jQuery(document).ready(function($){
	$(".feature-box-1").wrap('<a href="https://herword.co/about/link-1/" target="_none"/>');
	$(".feature-box-2").wrap('<a href="https://herword.co/community-women/link-2/" target="_none"/>');
	$(".feature-box-3").wrap('<a href="https://herword.co/share-a-story//link-3/" target="_none"/>');
});


Hope this helps.

Thanks, but the code still doesn’t work…

Could you delete my analytics UA code from the public thread please?

Hi @SiobhanH

Sure, I removed it.

I overlooked something, since you added feature-box-1 as an ID, then it should be #feature-box-1 instead of .feature-box-1. Should be like this

jQuery(document).ready(function($){
	$("#feature-box-1").wrap('<a href="https://herword.co/about/link-1/" target="_none"/>');
	$("#feature-box-2").wrap('<a href="https://herword.co/community-women/link-2/" target="_none"/>');
	$("#feature-box-3").wrap('<a href="https://herword.co/share-a-story//link-3/" target="_none"/>');
});

I tried it and it should be working.

Thanks!

Thanks. I still couldn’t get that to work. But I tweaked it again, stripping out the target attribute and removed the extra / in the third link and this now works:

jQuery(document).ready(function($){
	$("#feature-box-1").wrap('<a href="https://herword.co/about/">');
	$("#feature-box-2").wrap('<a href="https://herword.co/community-women/">');
	$("#feature-box-3").wrap('<a href="https://herword.co/share-a-story/">');
});

Hello @SiobhanH,

It’s good to know that you have figured out a way to resolve the issue.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.