Help with The Grid items centering on mobile device

Support
#1

Hello X Team,

I know this might not be the right place for this question but I thought I would ask anyway.

I am adding the grid plugin to my site and it holds portfolio items of my work. I looks fine desktops but when viewed on a mobile the grid items are too big (flowing off the screen) and off center. I have attached a screen grab of what it looks like on my phone and have also confirmed the display problem on some other devices that I have access to.

Here is the website URL:

What i would like is a way to center this grid, shrink the grid images just a touch, and then add a bit of margin above and below the grid times to space them out, but my css skills arn’t quite honed enough to make all this happen so if you could lend a hand or tell me where to go to get the help I need it would me most appreciated.

#2

Hi there,

Please add this code in the custom CSS:

@media (max-width: 767px) {
    article.tg-item.sofia {
        width: 100% !important;
        height: 180px !important;
        position: relative !important;
        top: auto !important;
    }
}

Hope this helps.

#3

Thanks for the help I plugged in the CSS above it didn’t connect or make a visual difference I can see on my phone, could you please look.

I’ve plugged in the CSS and saved my work, I’ve even tried playing with the rule:

width: 100% !important; => Changing it to like 50% just to hopefully see a change and I didn’t so I don’t think the CSS is connecting.

Thank you for the extra help,

John

#4

Hi John,

Please try adding that CSS on the grid item skin. Theme CSS was overridden by some CSS on the grid itself. Add it here: https://theme-one.com/docs/the-grid/#!/custom_css_js_code

Hope this helps.

#5

Worked like a charm thank you for the help X team!

John

#6

Glad to hear it John!