Sorry to say but it is still not working correctly.
This time the Advanced editors shortcode becomes visible on front end when adding a background color to a column, looking like this:

….. Hermann Zeidler ist am 4.12.2009 in Schopfheim verstorben. [/av_textblock] [/av_one_full] [av_one_full first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='#dddddd' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display=''] [av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='']

This is a bad situation! I think I will have to use an different theme if Kriesi does not fix this very soon and I don’t want to imagine what can happen to me past clients that I have used ENFOLD for building their sites. Hopefully none of them updates ENFOLD now.

Hi Ismael,

I played with the code you gave me and come up with this one that finally works with my masonry across all platforms and devices (with deactivated overlay in masonry, because activated masonry doesn’t work on ipad/iphone) the way I wanted:

/* Masonry overlay */

.av-masonry-entry:before {
content: attr(title);
color: #FFF;
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 20px;
transition: all linear 0.2s;
}
.av-masonry-entry:hover:before {
opacity: 1;
}
.av-masonry-entry .av-inner-masonry:before {
content: ”;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
display: block;
z-index: 100;
position: absolute;
transition: all linear 0.2s;
opacity: 0;
}
.av-masonry-entry:hover .av-inner-masonry:before {
opacity: 1;
}

If you could be so kind and let me know how to:

2. Also I would like to center titles horizontally as now it’s centered to outer box of masonry-entry instead of inner-masonry. Vinay managed to center it up in it’s latest code, but for a life of me I can’t figure it out and implement it with current code.

I really appreciate your help. Thank you very much!

Cheers, Alan

Thanks – I can’t see that your adjustments have made a difference.
I still see 2 different font sizes on the mobile.
Is there an easy way to clean up my css? It always gets a bit messy by the time I’m done building.
thanks
Nancy

Hi Victoria,

thank you for the links.

This one https://kriesi.at/support/topic/fontello-icon-inline-with-text-block/ is only working with ALB.
This one https://kriesi.at/support/topic/fontello-icons-in-text/ is also not working.

Still I don’t know how to showing up the following text and icon in one row:
Hello [av_font_icon icon='ue800' font='fontello' style='' caption='' link='' linktarget='' size='18px' position='left' color='' custom_class='' admin_preview_bg=''][/av_font_icon] how are you?

Please urgently help. Thank you.

Kind regards,
Sophie

Hello Ismael,

Thank you for a quick reply!

I inserted your code after current one so now it looks like this:

/* Masonry overlay */

.av-masonry-entry:before {
content: attr(title);
color: #FFF;
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 20px;
transition: all linear 0.2s;
}
.av-masonry-entry:hover:before {
opacity: 1;
}
.av-masonry-entry .av-inner-masonry:before {
content: ”;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
display: block;
z-index: 100;
position: relative;
}

1. Black background now looks good as it covers only the image, but it’s always on instead of showing up only on hover state as the title.

2. Also I would like to center titles horizontally as now it’s centered to outer box of masonry-entry instead of inner-masonry. Vinay managed to center it up in it’s latest code, but for a life of me I can’t figure it out and implement it with current code.

I really appreciate your help. Thank you very much!

Cheers, Alan

Hi Victoria,
thanks.

Can you disable caching and minification for now?

just done: deactivated WP Rocket

The code that you posted in working up to the screen of 989px and it is not the code I gave you.

yes, I wrote, that this is the code using in live version.
But on developemnt environment I have used your code:

@media only screen and (max-width: 1250px) {
    #header_main_alternate {
        display: none;
    }

    .html_header_top.html_header_sticky.html_bottom_nav_header #main {
        padding-top: 88px;
    }
    .html_header_top #top .av_menu_left .main_menu {
        left: auto;
        right: 0;
    }
    #avia-menu li#menu-item-search.menu-item {
        display: block;
    }
}

UPDATE: just seen the reason for the issue with the word “menue” – see screenshot 4 – but dont’t know, to solve it
UPDATE 2: Just find the reason for the issue with the word “menue” and solved: Design->Customizer->Additional CSS (I remember, that we insert it long time ago in July 2017 because of an issue with the mobile menu)
UPDATE 3: It seems as if I have found (not optimum) solution. See dev environment:

@media only screen 
and (min-device-width : 990px) 
and (max-device-width : 1100px)
{
   /* Container (Inhalte) werden 100% angezeigt, allerdings nicht unter 767px - Regel aus grid.css*/
  .container {
      max-width: 100% !important;
   }
 
/* Damit der Content (Inhalt) über die Breite gezeigt wird und nicht die sidebar frei gehalten wird */  
  .content { 
      width: 100% !important; border: none !important; 
   }

/* Wenn die Schriftgröße auf 90% verringert wird, wird das Menü komplett gezeigt: */
  .avia-menu-text {
      font-size: 90% !important;
  }
}

@media only screen 
and (min-device-width : 1101px) 
and (max-device-width : 1250px) {

/* Wenn die Schriftgröße auf 90% verringert wird, wird das Menü komplett gezeigt: */
  .avia-menu-text {
    font-size: 90% !important;
}

}

Thanks for advice.

Best regards,
Hans-Gerd

• This reply was modified 8 years ago by hagege. Reason: potential solution for menu issue, see UPDATE 3

Thanks, Mike but it’s still jumping and the text is not stacked vertically. I targeted just this page, so added in the code, below. I want it to appear like this –

STUDIO
1 BD
2 BD
2 BD + DEN
3 BD

Thanks again!

/* older plans page to stack titles */

.page-id-197 #av-tab-section-1 .av-inner-tab-title,
.page-id-197 #av-tab-section-1 .av-tab-section-icon,
.page-id-197 #av-tab-section-1 .av-tab-arrow-container,
.page-id-197 #av-tab-section-1 .av-tab-section-image {
width: 80px !important;
}

.page-id-197 #av-tab-section-1 .av-tab-section-tab-title-container {
padding-left: 25px !important;
padding-right: 0px !important;
}

.page-id-197 #av-tab-section-1 .av-section-tab-title {
font-size: 10px !important;
}

Same thing happens when I try to change something in the Advanced Styling menu…again I’m trying to adjust the font to a size I like. It allowed me to change to Metrophobic, but the size changes I’m making don’t do anything. AND now when I delete the font change to metrophobic, it just stays stuck on that font.

Just try making any changes at all to the quick CSS. You’ll find it doesn’t always respond.

Things I’ve been trying to do are:
-change the main menu font type to Metrophobic
-get rid of the extra spacing below a blog grid layout area (bottom of the “Latest” section on my page and bottom of “Digital Features” section.
-make the main blog post body font size a little larger.
-I also have coding in to create a mouse-hover text for the link headings on my home page…but actually it’s made a hover color for all headings (even un-linked ones), which I didn’t want.

yes – why doesn’t that code also effect slider 4 & 8? That’s where I’m confused.
all the font sizes in the slider captions are set to default. Something is conflicting and I can’t find it.
thanks
Nancy