The Grid / Doha Skin: expanded preview too large

[Lim]

Hi there,

Good day! I’ve been using the Grid to display my portfolio at www.limziai.com, but I only recently realized that the preview gets way too large in Chrome and Safari. I’ve attached two screenshots to show what I mean – you’d notice that the image is so big that it’s cropped at the edges. This doesn’t seem to be a problem for landscape pictures, just portrait ones.

I’ve tried the following code suggested in another thread, but I’m afraid it doesn’t work – just makes the preview wonky:

.tolb-holder img
{
    width:50% !important;
}

Results in:

Ideal layout (appears only when I’m logged in)

Might there be an easy way to resolve this w/o having to resize all my pictures? Thanks very much!

Cheers,

[marc_a]

Hi Lim,

Thanks for reaching out!

The only option we can adjust the image in an easy way is just using custom CSS. Please add the custom CSS below in your X > Theme Options > CSS

.tolb-content {
    width: 50%;
    margin: 0 auto;
}

Result:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[Lim]

Hi Marc, thanks for replying so quickly!

It works, kinda – it’s just that it doesn’t make a lot of sense when the lightbox that opens is smaller than that in the preview:

That’s, of course, not a problem with your solution – but with the plug-in. I don’t believe this was a problem before; I haven’t made any changes to the images nor settings, but it’s only recently that the lightbox isn’t responsive. Plus, even without the CSS, the preview is perfectly fine when I’m logged into the admin panel, w/o running into trouble of it being smaller than the preview.

When logged out / in incognito, however:

It’s just weird that there should be a difference in the preview in either mode – and again, it’s a recent problem, I’ve never had to add CSS before. Might it be a bug? I’ve tried to update the plug-in (I have 2.7.2; the latest is 2.7.9.1), but everytime i click on update, it tells me I already have the latest version.

I’d appreciate any help please - my credentials are in the first post - thank you!

[ruenel]

Hello Joy,

Thanks for the information. The grid modal popup will display a larger image even if the original is smaller. If you want to limit the size for the image display in the lightbox, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

In your case, you will have to use this code:

.tolb-holder figure {
    max-width: 500px;
}

Feel free to increase or decrease the maximum width that best suits your site.

[Lim]

Hi both,

Thanks a lot for your help! I updated the plug-in (deactivating first resolved the update issues), purged my cache, and it’s now responsive w/o having to add any CSS. I appreciate all the help very much nonetheless – thanks a lot for being here for users, and stay safe always! Please feel free to close to thread now.

Cheers.

[friech]

Hi Joy,

Glad you sorted things out,

Cheers

[brim]

Well done, this worked for me too. The issue seems that without deactivating ‘The Grid’ plugin and then doing the update while deactivated, it would not have really upgraded the version successfully.

Thank you @Lim

[friech]

Glad that sorted things out on your end too and thank you for that info.

Cheers!