Docs

[Alex]

Hello Team,

Is it possible to change the font size for “The Grid” items ?

It looks super weird on mobile and would like to make it smaller…

[Alex]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Sure, you can do that by adding this CSS to Admin > Appearance > Customizer > Custom > CSS

@media ( max-width: 767px ) {
.sofia .tg-item-title, .sofia .tg-item-title a {
font-size: 40px;
line-height: 40px;
}
}

Hope that helps.

[Alex]

Hello team,

thanks for the quick reply,

unfortunately the given code doesnt seem to make any difference.

Any ideas ?

Cheers,

Alex

[Lely]

Hi Alex,

Upon checking, I didn’t see if the code is added on your site.
You may also try to update above CSS to this:

@media ( max-width: 767px ) {
.sofia .tg-item-title, .sofia .tg-item-title a {
font-size: 40px !important;
line-height: 40px !important;
}
}

Hope this helps.

[Alex]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS and adjust the px according to your wishes.

@media ( max-width: 767px ) {
.tg-item .dark h2, .tg-item .dark h2 a, .tg-item .dark h3, .tg-item .dark h3 a, .tg-item .dark a, .tg-item .dark a.tg-link-url, .tg-item .dark i, .tg-item .dark .tg-media-button {
font-size: 12px !important;
}
}

Hope it helps,

Joao

[Alex]

This reply has been marked as private.

[Rupok]

Hi there,

That’s seems a different website. However your previous code have glitch that’s why it’s not taking effect – http://prntscr.com/bgjeit

Kindly make sure to close the code above that.

Cheers!

[Alex]

Hi Team,

Apologies for missing that. Unfortunately even with the fixed code I can’t see any changes taking effect…

You can see in the image attached below. Any other suggestions ?

Thanks again for all your help

https://drive.google.com/open?id=0B4y7zW_7cchva0g5WndabG40bTA

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media ( max-width: 979px ) {
    .tg-item .dark h2, .tg-item .dark h2 a, .tg-item .dark h3, .tg-item .dark h3 a, .tg-item .dark a, .tg-item .dark a.tg-link-url, .tg-item .dark i, .tg-item .dark .tg-media-button {
        font-size: 14px !important;
    }
}

@media ( max-width: 979px ) {
    .tg-item .dark h2, .tg-item .dark h2 a, .tg-item .dark h3, .tg-item .dark h3 a, .tg-item .dark a, .tg-item .dark a.tg-link-url, .tg-item .dark i, .tg-item .dark .tg-media-button {
        font-size: 12px !important;
    }
}

.sofia .tg-item-content-holder .tg-item-content-inner {
    padding: 14px;
}

.sofia .tg-item-title, .sofia .tg-item-title a {
    padding: 0 !important;
    line-height: 1;
}

This has been tested to work via browser dev tools. If it still doesn’t work, then something else is conflicting. You may need to check your grid settings to see if there are any forced styling with the !important attribute.

Let us know how that goes. Hope this helps – thanks!

[Alex]

Team, that’s perfect ! Thanks so much !!!!

Would you be able to provide me with the code to do the same to the section just above titled “work, our finest moments” also with The Grid.

Thanks for all your help ! You’re amazing 😀 !

[Jade]

Hi Alex,

Please try this:

@media ( max-width: 979px ) {
    .tg-item .light h2, .tg-item .light h2 a, .tg-item .light h3, .tg-item .light h3 a, .tg-item .light a, .tg-item .light a.tg-link-url, .tg-item .dlight ark i, .tg-item .light .tg-media-button {
        font-size: 12px !important;
    }
}

.sofia .tg-item-content-holder .tg-item-content-inner {
    padding: 14px;
}

.sofia .tg-item-title, .sofia .tg-item-title a {
    padding: 0 !important;
    line-height: 1;
}

Hope this helps.

[Author]

Posts