PORTFOLIO GALLERY TEAM

Please checkout this the Demo 3 here: https://wpsofts.com/grid-kit-demo/photo-gallery/
If you click on any item you’ll see how our content popup presentation looks like. It does not look the same as in the reference you’ve mentioned, but I think Grid Kit provides a nice alternative for such implementation.

@trottel5000 if you open the browser console, you’ll see number of styles and scripts are being failed to be loaded to due invalid https configuration. Seems you’ve installed ssl certificate on your website, but have forgotten to adjust WordPress settings. Try to login to your WordPress, then navigate to Settings > General section and make sure “WordPress Address” and “Site Address” options have https:// prefix.

Hey @kalipipsy, have you updated the plugin to the latest version? I guess you’re facing this issue after updating your WordPress, right? If that’s the case, then the plugin update should resolve your issue. If you’re using Free version, then make sure you run v.1.8.23, otherwise v1.8.48.

Note: Please do not forget to cleanup website caches after installing the latest update!

In case the issue exists, please re-open the topic!

Hey @kalipipsy,

You can get the both questions done by using custom css styles. As you’ve provided the website url, I’d provide the exact styles you should put in your gallery settings section:

#crp-content-2 .details26 .details {
    opacity: 0 !important;
    -webkit-transition: opacity 0.3s ease-in-out !important;
    -moz-transition: opacity 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out !important;
}

#crp-content-2 .details26:hover .details, .details26:focus .details {
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: center !important;
    opacity: 1 !important;
}

#crp-content-2 .details26 .details * {
text-align: center !important;
}

.lg .lg-sub-html h4 {
    font-size: 40px;
    font-family: 'Quicksand',sans-serif;
    max-height: auto !important;
} 

.lg .lg-sub-html p {
    font-size: 20px;
}

In case the issue exists, please re-open the topic.

Have you updated the plugin to the latest version? If you’re referring to the Free version, then it should be v1.8.23, otherwise it should be v.1.8.48.

If you’re running any caching plugin or optimization tools, please make sure all caches are emptied after completing the update.

In case the issue still persists, please send an email to support@wpsofts.com. We’ll investigate the issue further. Generally the above mentioned resolution should fix the issue!

@vanzandvoortit, try to use word-break property instead of word-wrap. E.g. the styles should look like this:

H1{font-family: Verdana; word-break:break-word;}
H2{font-family: Verdana; word-break:break-word;}
H3{font-family: Verdana; word-break:break-word;}
P{font-family: Verdana; word-break:break-word;}

• This reply was modified 5 years, 1 month ago by PORTFOLIO GALLERY TEAM.

@vanzandvoortit I’m checking your website and I’m pretty sure the following is the reason of the issue you’re experiencing.

I guess you have invalid css styles added in your gallery settings section with this short-code: [gkit id=2]

This is the css you have and this corrupts the entire css styles which should be interpreted:

H1{font-family:Verdana;word-wrap:normal]
H2{font-family:Verdana;word-wrap:normal}H3{font-family:Verdana;word-wrap:normal}P{font-family:Verdana;word-wrap:normal}

Please either remove it from the settings section or fix it, e.g.

H1{font-family: Verdana; word-wrap:normal;}
H2{font-family: Verdana; word-wrap:normal;} 
H3{font-family: Verdana;word-wrap:normal;}
P{font-family: Verdana;word-wrap:normal;}

All the changes you apply on the gallery settings you’ve posted will be affected now.

In case you still face any difficulties, please let us know.

You can achieve such results using custom css styles. E.g. checkout this code snippet:

#crp-content-SHORTCODEID .details {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

#crp-content-SHORTCODEID .details h3{
    margin: 0px !important;
}

Note: The SHORTCODEID should be replaced with the respective identifier. E.g. if your grid’s short-code is [gkit id=231], then the css selector should be #crp-content-231