Hi,

By re-creating the page the theme/plugin forces the CSS and JS files to be regenerated in the cache which resolve the issue.

An alternate and a quicker way that might work depending on the site settings would be to try disabling the CSS and JS file merging and empty the cache from the caching plugin settings if there are any. You should be able to view the page like before after the cache is cleared and the new CSS and JS files are loading you can enable the CSS and JS file merging from the performance option.

Best regards,
Vinay

• This reply was modified 7 years, 2 months ago by Vinay.

Hi,

Ok here is what I managed to do.

Add the below masonry shortcode and select the portfolio or blog posts to display.

Note: masonry has a custom CSS class “av-masonry-flip”.

[av_masonry_entries link='portfolio_entries,20,22,23' wc_prod_visible='' prod_order_by='' prod_order='' sort='yes-tax' items='9' columns='3' paginate='load_more' query_orderby='date' query_order='DESC' size='fixed' orientation='av-orientation-square' gap='large' overlay_fx='active' id='av-masonry-flip' caption_elements='title excerpt' caption_styling='overlay' caption_display='always' color='' custom_bg='' av-medium-columns='' av-small-columns='' av-mini-columns='' av_uid='av-jggf0l6e']

Then add the below CSS

/* Masonry flip */
.av-masonry-flip .av-masonry-entry {
  transform-style: preserve-3d;
  transition: all .85s ease-in-out;
  
}
.av-masonry-flip .av-masonry-entry:hover {
  transform: rotateY(180deg);
}
.av-masonry-flip .av-masonry-entry .av-masonry-outerimage-container {
  backface-visibility: hidden;
}
.av-masonry-flip .av-masonry-entry .av-inner-masonry-content {
  z-index: -1;
}


.av-masonry-flip .av-masonry-entry:hover .av-inner-masonry-content {
    z-index: 1;
    transform: rotateY(180deg);
    backface-visibility: visible;
    animation: .85s flipIn!important;
}


@keyframes flipIn {
 0% {  
    opacity: 0;
  }
  49% {  
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

You can see a working example here http://graphitivity.com/enfold/docs/_test/

This is the best we can do for you if you need an effect that’s better than this we recommend using a 3rd party plugin that offers this type of animation.

Best regards,
Vinay

Hi,

Please enable custom CSS class name in Enfold > Layout Builder > Show element options for developers

Give the container a unique class name and replace it with the page-id-class :)

Best regards,
Vinay

Hi,

Please check the plugin documentation or check if the plugin author can help you with it as they know their plugin better. If it was anything to do with enfold we would have surely helped you with it.

Best regards,
Vinay

Hi,

I have added the below code to the Quick CSS section and the top bar has a white background now please review the site :)

@media only screen and (max-width: 990px) and (min-width: 768px) {
#top #header_meta {
    background-color: #ffffff!important;
}}

Best regards,
Vinay

Hi,

I still see the same login screen. Please review the link and let us know when we can inspect the element.

You need to logout of admin and be able to view the link or share the admin login details in private content area.

Best regards,
Vinay

Hey isabella pieri,

We do not provide bulk discounts. Please contact ThemeForest support for sales queries.

Thank you for reaching us out.

Best regards,
Vinay

Hi,

Yes, we sure will. On a daily basis, we do see different types of customers. Screaming or clam we always try our best to help them out and treat them right.

Thank you for this post :)

Best regards,
Vinay

Hey rossboom22,

If you check the console you will notice Google Maps API error: RefererNotAllowedMapError which means the API key does not support Google Maps or the domain name is not included please review the API key again and it should work for you.

https://console.developers.google.com/apis/library?project=_

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

@media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height:140px;
}}

Best regards,
Vinay

Hey oscarvanheeswijk,

I checked your site and it looks fine. It could be a caching issue on your end. Check the caching plugin setting and empty the cache if you are using one.

You may not see the changes until the cached files are cleared in your browser.

Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

Best regards,
Vinay

Hi,

If it’s the Lato font family you recently added please also import the font in the style sheet.

Assuming you are using a child theme

Go to Appearance > Editor > style.css

Add the below line to the top of the stylesheet

@import url('https://fonts.googleapis.com/css?family=Lato');

If it is a different font you added please copy the import rule from google fonts and add it to the top.

Best regards,
Vinay

Hi,

Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Vinay

Hey MM,

Thank you for bringing this up. we have notified our development team.

Best regards,
Vinay

Hey Xinspirit,

Please empty the cache in the caching plugin and it should fix for you 100%.

If you still have an issue please use the below CSS

.avia_transform .avia-icon-list.av-iconlist-big .iconlist_icon {
    opacity: 1!important;
    transform: scale(1)!important;
}

Best regards,
Vinay