Column Link CSS Breaks Buttons

I read through your other threads on turning a column into a link and the instructions work great. However, they cause a button (at least one placed at the very bottom of the page) to not display properly. The button seems to have its own random padding/markup added when the column-link CSS is in place. When this is removed, the button shows properly. The CSS I’m referring to is:

.x-column {
position: relative;
}

.x-column > a {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}


See the very bottom of https://tdziprentals.com/properties/

Attached is how that same exact button looks in the editor, and also how it should appear.

Hi @co50,

Thank you for reaching out to us. I tried to check your site but it’s under construction at the moment. I believe it’s happening because the button element is itself an anchor too and your CSS is also applied to the button as well, try replacing your CSS with the following code:

.x-column {
position: relative;
}

.x-column > a:not(.x-btn) {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}

If it doesn’t help then give your button a class e.g column-btn and then replace your code with the following:

.x-column {
position: relative;
}

.x-column > a:not(.column-btn) {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

The second solution worked. Thanks. Keep in mind that the original solution I used came from a heavily linked thread on turning columns into links so this quirk should be documented with it.

Just to add, the original column-link instructions cause every button on the site to act this way including the submit button on gravity forms, Pro buttons, etc. Those instructions should be modified to avert this.

Hey @co50,

The suggested solution in the thread might be specific to a particular user’s site so it might not work for you without customization. I checked our knowledge base and couldn’t find a snippet for column link, however i did find a thread that has the similar solution here https://theme.co/apex/forum/t/how-to-make-my-column-link-to-another-page/7208/4 and I made adjustments in the code.

If you’re referring to different thread then please share the link you followed so we can update the thread.

Thanks!

That was the thread. Very good idea to update it. Thanks, Nabeel!

Hey @co50,

Sorry for the confusion. Please let me clarify that all custom codes provided here in the forum are only guides. They’re not absolute solutions. We can’t take everything into account when we suggest a solution.

For instance, the code you’ve posted in your first post targets all links. Globally if you placed it in Theme Options > CSS.

This is why I always recommend that you consult with a third party developer if you’re going to custom code or implement a custom code in your site. We are not responsible for fixing nor enhancing custom codes and we could not update the suggestions we’ve given in a thread because that might take out some context and cause confusion.

I hope you understand.

Understood, but you realize that hundreds of people use existing threads for support and that this prevents them from having to start a new thread and take up your time? You know this, yes?

By all means, if the goal here is for every Pro customer to start their own thread for every issue, I’m all for it. But I can’t see how Pro management would want that. Always better to have go-to threads with common solutions. But the error here is that your support people routinely point folks to that column-to-link thread which they should not be doing if it’s just one person’s solution.

Hi again,

Yes, I understand. I do not mean that users will open threads to ask for custom code. That is outside the scope of our support and that is why I recommend to consult third party developers if users need features that are not yet offered in the theme like the column link. I forgot to say though that I’ve forwarded this as feature request.

For now, you’d need to consult with a third party developer if the suggestions provided here don’t work for your particular setup. I understand the usefulness of go-to threads but not all setups are the same and we might at first lead you to a similar thread. If it does not work for you, feel free to ask but please be mindful that custom development is not a part of our product support.

Again, please note that this column link feature is not an official feature of the theme nor any custom code you find here in the forum therefore we are not responsible for fixing nor enhancing them. With that said also, they’re not a part of our product support but we sometimes go above and beyond and provide custom code suggestions. But again, that’s not a part of product support.

Thank you for understanding.

I don’t think asking for a few lines of CSS to make up for what is a glaring omission in the theme (every top theme has column links built in, including every theme that uses WPBakery) is custom development. Good day, sir.

Hello @co50,

It’s totally fine, we try our level best to assist our customers (via Custom CSS or Codes) to have a better presence on Internet using Themco products. Having said that we have added this into our internal feature request tracker.

I suggest you to please keep an eye on Changelog page for product related announcement.

https://theme.co/changelog/

Thanks.

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