Adjust 'The Grid' title sizes- look bad out of the box; totally unusable in mobile

Support
#1

Hello-

Kinda crazy how bad The Grid looks when used for a blog index page! The titles are full-weight, too big, and clearly have incorrectly set ‘stock’ margins/padding, as there’s only room for a single letter within a ‘box’ in mobile (see screenshots). This client needs to go live in the next 48 hours, and there’s no time for Child Themes at the moment. I’ve tried other threads and cant locate a class to target the blog’s title text css in The Grid for Pro Theme (latest version).

Ok if titles have a ‘…’ if they’re long, but should at least be able to get them down to 12px or so so they’re somewhat legible in mobile, and perhaps a bit less ‘fat’ and squished in a desktop browser.

URL: http://sandiegobk.flywheelsites.com/
USER: flywheel
PASS: sandiegobk
(hidden site, cred’s above are merely to view it)

…on a desktop:

…in mobile:

…currently using The Grid’s ‘Sofia’ skin, but am open to use another as long as it shows a title before hover/mouse over like Sofia does.

Thank you!

#2

Hello There,

Thanks for posting in! I have checked your site and I can confirm the issue. To resolve this, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
    .sofia .tg-item-content-holder .tg-item-content-inner,
    .sofia .tg-item-title, .sofia .tg-item-title a {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

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

#3

Hi Rue-
Sorry, but no luck adding that code to the global CSS. Cleared cache and everything- no change.

#4

Hello There,

The code works. It just that the row’s column container width needs to be adjusted. To resolve this, please remove the code I gave from the customizer settings first. And then please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
    .x-section .el17.x-container{
      margin: 0 auto !important;
      width: 100%;
    }

    body .sofia .tg-item-content-holder .tg-item-content-inner,
    body .sofia .tg-item-title, 
    body .sofia .tg-item-title a {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

This is to make sure that this given code will be applied to that page only.

Please let us know how it goes.

#5

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