Hi, thank you so much. I’ve really been struggling with this, and the following spaghetti is the best I could come up with so far:

******************

#top #wrap_all .custom-color-heading .av-special-heading-tag {
color: #ffffff !important;
text-shadow: 2px 2px 4px #000000; }

.av-masonry-entry .av-inner-masonry:hover:before {
background: rgba(0, 181, 241, 0.7);
}

.av-masonry-date{ display: none !important;
}

.av-masonry-entry .av-inner-masonry-content {
background:transparent !important;
text-align: center;
}

.av-masonry-entry .avia-arrow { display: none;
}

.av-masonry-entry .av-masonry-entry-title {
background: transparent;
padding: 10px;
margin-bottom: 20%;
font-weight: bold;
font-size: 30px;
color: #ffffff !important;
text-shadow: 2px 2px 4px #000000;
}

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
animation: none; /* IE 10+ */
}

.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
-moz-transform: none;
transform: none;
opacity: 1!important;
}

/* UNUSED
.av-masonry-entry:before {
content: attr(title);
background: radial-gradient(transparent, black);
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;
color:#ffffff !important;
}

.av-masonry-entry:hover:before {
opacity: 1;
}

.av-masonry-entry:before{
transition: all linear 0.2s;
}
*/
**************

The EXACT effect I want to replicate is like the masonry on this page:
http://stophavingaboringlife.com/cats/travel-blog/

I feel like I am pretty close, but its taking up most of my mental energy and time to figure out how to make the content display just like on that page.

Specifically what I would like to emulate is:
– the vignette over the content box, and another deeper vignette on hover
– the styling of the big title on the big featured post content box on the left
– Having the author displayed under the title
– upon hover, the title and author text slides upwards to reveal an excerpt

Please have a look at my page, and you’ll see that I have three widget areas for featured content. I would also like to apply the same styling as described above on those as well. I can’t figure out how to have the title/author/excerpt display on those just like in the blog masonry element.

Honestly, thank you so very much for your help. You guys are seriously amazing. If you are ever in Tokyo, beers are on me:)

• This reply was modified 11 years ago by Apollo87.

Hello Elliott,

Thanks for your patience. I deleted and reinstalled Enfold, activated just the theme, then reactivated my child theme – and my site lived to tell the tale! I have also narrowed down exactly where this size issue happens.

In the avia layout builder, it works. In a regular post, it works. In a regular page, it works.

In a custom post type, inserting the shortcode and changing the numeric value for “size” does NOT work. For me, this mainly manifests in any page related to The Events Calendar (I have the pro version). I don’t know if that’s an integration issue on your end or theirs, but I end up just clumsily changing the font size inline (to the text within the shortcode) to get the desired effect. Any ideas on getting these two to play nice so I can cut out that inline style?

Thank you, that works until it gets to around 550px on mobile.

Is there a way to reduce the font size when it gets to that screen size so it stays on 1 line?

I think it’s better, but still there is a gap, if you croll down on the page, the last row’s on the right, it starts with “preise”, they are still out of the horizontal line. Is that because of the font size?

Thanks for your reply! Unfortunately, I have tried that method several times, and it is not working. The first time (changing the main menu link color, background, and font size but not checking “Apply only to mouse hover state”) applies the changes to make the main menu links and the mouse hover state look identical. However, the second time (changing the main menu link color and background then checking “Apply only to mouse hover state”) always reverts my main menu links to the default color, size, and background while keeping the new mouse hover state color, background, and size. It seems like something that’s self-explanatory, but it’s just not working correctly. Do you have any other ideas or suggestions?

Hi Ismael,

yess, I have put 1140 in the “full width slider settings”. Is that ok? And I have already put a text in the classes field and quick CSS. … I have added some text like my text in the slider wont become to small and stays bigger on mobile devices. You know what I mean?

This one…

@media only screen and (max-width: 500px) {
.layer-slider-caption {
font-size: 20px !important;
line-height: 35px !important;
}
.layer-slider-title {
font-size: 30px !important;
line-height: 30px !important;
}
.layer-slider-head {
font-size: 20px !important;
line-height: 20px !important;
}

What should I now put in?
Cheers

Ok nevermind I found how by adding this to custom.css

#top .avia-slideshow-button {padding: 25px 50px 23px;
font-size: 15px;
min-width: 200px;}

I finally found out that what I wanted to do was change the icon list TITLE. I found a solution from Ismael here:
https://kriesi.at/support/topic/header-and-footer-enfold-default-style/

.avia-icon-list .iconlist_title {
text-transform: none;
}

But this solution will apply through the site. How do I use Custom CSS to change the titles of individual icon lists?

Also, how do I do this for other elements. E.g. I have inserted an Easy Slider where I have added the Custom Css class awesome-easyslider. Under Quick CSS I have inserted:

.avia-easy-slider. awesome-easyslider {
text-transform: lowercase; 
font-size: 10px; 
text-align:center;
}

Which doesn’t work. Is there a general syntax for doing this kind of thing?