Changing font size in The Grid

Support
#1

Hi there,

I am having trouble reducing the font size in the skins of The Grid.
They are really big in mobile, and so I am imagining the only way to reduce the size/line padding there is to do this in the desktop version. I have already tried different options with customiser code from the forums with no luck.

Any help greatly appreciated.

http://www.simplysignspreview.com/alist2

#2

Hello,

Please, can you provide to us some screenshot about the grid that you mentioned in the question?

#3

Hi there,

This is regarding The Grid - the plugin that comes with X theme.
On desktop the fonts are quite large, and on mobile even more so.

Desktop

https://www.simplysigns.com/wp-content/uploads/2017/08/desktop-the-grid.jpg

Mobile

https://www.simplysigns.com/wp-content/uploads/2017/08/mobile-the-grid.jpg

Many thanks and any help greatly appreciated.

#4

Hi there,

You can add a custom CSS to adjust the font size of the grid title on mobile.

First, you have to create a media query block for mobile. Mobiles usually have a maximum width of 480px. Please refer to here.

Then you can use the CSS selector .malabo .tg-item-title to target the grid title and add a custom CSS rule to set the font-size that will fit on mobile view.

Hope this helps.

#5

Hi there,

Thanks for your help.

I am trying this code and it is not working, not even on desktop.
Please advise what CSS I need to use, as the X Theme customer support staff before have provided exact code so I can get it correct.

Many thanks!

.malabo .tg-item-title {
font-size: 10pt;
}

#6

Hi there,

It should be something like this:

@media (max-width: 480px) {
    .malabo .tg-item-title {
        font-size: 12px;
    }
}

Hope this helps.

#7

Hi there,

Many thanks for sending this through. Sadly the code has not affected the font size of The Grid. Please advise.

#8

Hi There,

Please use the following code if you want it to affect just on mobile

@media (max-width: 480px) {
    .malabo .tg-item-title {
        font-size: 12px !important;
    }
}

Please use the following code if you want to affect all the screen widths

    .malabo .tg-item-title {
        font-size: 12px !important;
    }

Hope it helps!