Enlarge the clickable area of a link

[Vay]

Hey there,
I wanted to enlarge the clickable area of a link. I read somewhere that you can do it with padding. I tried but it didn’t work. Based on the Cursor I can see that the area is larger but when I click on the area it doesn’t lead to the new page. Nothing happens when i click on it.

I used:
.tg-homerezepte .tg-element-2 a{
display: block;
padding-top: 50%;
}

Thanks in advance

[ruenel]

Hello @Vay,

Thanks for writing in!

You will have to edit your grid skin and make sure that you have enough width for the read more button. You may also update your code and use this instead:

.tg-my-skin .tg-element-7 a{
    display: block;
    padding: 50% 2%;
}

Hope this helps. Please let us know how it goes.

[Vay]

Actually I want the clickable area of the links in the pictures below to be bigger.

[ruenel]

Hello @Vay,

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.tg-homerezepte .tg-bottom-holder {
    position: absolute;
    top: 0;
}

.tg-homerezepte .tg-element-2{
    width: 100% !important;
    height: 100%;
    display: table;
    padding: 0 !important;
}

.tg-homerezepte .tg-element-2 a{
    display: table-cell;
    padding: 0 !important;
    text-align: center;
    vertical-align: middle;
}

We would loved to know if this has work for you. Thank you.

[Vay]

It worked
Thanks a lot

[rad]

You’re most welcome!