Docs

[Lobsterass]

Hola rockstars!

I’m trying to keep my drop shadow .tg-item {box-shadow: 0 4px 7px -1px #ddd;} looking the same all around the enlarged thumb on hover here. Currently, there is no shadow on the top and bottom part on hover.

I tried this:

.honiara a {
box-shadow: 0 4px 7px -1px #ddd !important;
}

but it adds extra unwanted shadow within the thumb as well. Please see attached image of this.

Is there an easy solution?

<3

[Thai]

Hi There,

Please try with this CSS:

.honiara a.tg-item-link {
    box-shadow: 0 4px 7px -1px #ddd !important;
}

Hope it helps 🙂

[Lobsterass]

Perfect! Thanx, Thai!

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Lobsterass]

I just realized Swedish letters Å and Ä get cut off in the top in the title word SLÅNBÄR. Please see image.

For some reason this only partly works:

.honiara .tg-item-title a {
font-size: 17px !important;
line-height: 22px !important;
font-weight: 300 !important;
letter-spacing: 0.05em !important;
padding-top: 2px !important;
}

Could you tell me what’s wrong with that css?

<3

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.honiara .tg-item-title, .honiara .tg-item-title a {
    font-size: 25px !important;
    line-height: 20px !important;
    white-space: normal !important;
    overflow: visible !important;
}

Let us know how this goes!

[Lobsterass]

That was awesome. Thank you! Yes! 🙂

…I know I’m a pain in the butt, but could you please also tell me:

1. How to add a border on thumb on hover only, as seen in the attached image?

2. How to make turquoise title box only 75% tall, like in attached image? I wish the huge hover effect was more subtle.

I appreciate your great support. You guys rock.

<3

[Christian]

Hey there,

1. Please add the code below in your Appearance > Customize > Custom > Global CSS

.honiara a.tg-item-link:hover {
    border: 1px solid #59c3c4 !important;
}

2.

.honiara .tg-item-content-holder {
    height: 90px;
}

Hope that helps. 🙂

[Lobsterass]

Hola!

1. Works great! Thanx! Whop whop!

2. The content holder divides in two parts when we do that. 🙂 Please see attached image.

<3

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.honiara .tg-item-content-holder {
    bottom: 30px !important;
}

Let us know how this goes!

[Lobsterass]

Hi!

Cool! Almost there!

That solved the first problem beautifully but created a small new problem. .tg-item-title and .tg-item-term is no longer centered vertically on iPhone or iPad. Please see attached image.

I tried the following but it doesn’t work:

.tg-item-term {
padding-bottom: 25px !important;
}

These small screens look like they are correctly vertically centered when viewed with a responsive tool on my desktop.

<3

[Christian]

Regretfully, since modifying that area presents conflicts, further modification would be quite involved and would fall outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[Lobsterass]

Hi!

OK. I understand. It takes more than just css. Thank you so much for all the excellent help with this! My portfolio is the most important part of my site so thats why I’m so anal with the details. 🙂

<3

In case anyone else have the same question, I semi-solved it by just making the change a little smaller:

.honiara .tg-item-content-holder {
height: 100px !important;
}
.honiara .tg-item-content-holder {
bottom: 20px !important;
}

[Thai]

Thanks for understanding 🙂

If you need anything else please let us know.

[Author]

Posts