Hi,

Add this in the functions.php file:

// grid hover
function add_custom_script_mod(){
?>
<script>
(function($){
	function a() {
		$('.grid-entry').each(function() {
			var excerpt = $(this).find('.grid-entry-excerpt').text();
			$(this).find('.grid-image').attr('data-excerpt', excerpt);
		});
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script_mod');

And the following code in the Quick CSS field:

.grid-image:after {
    content: attr(data-excerpt);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    font-weight: 400;
    font-size: 18px;
    color: #6c8d6c!important;
    top: 0;
    left: 0%;
}

.grid-image:after {
    opacity: 0.9;
}

Adjust the css properties value if needed.

Best regards,
Ismael

Hi mind,

The easiest way to find out how that page was layed out would be to import the whole page by shortcode, you can do so by activating debug mode: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/. Then add the following shortcode to the shortcode field in a new page:

[av_fullscreen size='extra_large' animation='fade' autoplay='true' interval='7' scroll_down='aviaTBscroll_down']
[av_fullscreen_slide slide_type='image' id='2553' attachment=',' position='top left' video='http://' mobile_image='' video_cover='' title='This is a page with transparent header' caption_pos='caption_left caption_left_framed caption_framed' link_apply='button' link='lightbox' link_target='' button_label='Show me' button_color='light' link1='#next-section' link_target1='' button_label2='Click me' button_color2='light' link2='http://' link_target2='' video_controls='' video_mute='' video_loop='' video_autoplay='']
Once the user scrolls down the header color will change
[/av_fullscreen_slide]
[av_fullscreen_slide slide_type='image' id='2552' attachment=',' position='top left' video='http://' mobile_image='' video_cover='' title='Another caption' caption_pos='caption_right caption_right_framed caption_framed' link_apply='button button-two' link='lightbox' link_target='' button_label='Show me' button_color='light' link1='#next-section' link_target1='' button_label2='Learn more' button_color2='light' link2='#next-section' link_target2='' video_controls='' video_mute='' video_loop='' video_autoplay='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque pe.
[/av_fullscreen_slide]
[/av_fullscreen]

[av_one_fourth first]
[av_icon_box icon='59' position='left' title='Free Support']
Aenean commodo ligula eget dolor. Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque<strong> </strong>Aenean massa.
[/av_icon_box]
[/av_one_fourth]

[av_one_fourth]
[av_icon_box icon='2' position='left' title='Mobile Ready']
Cum sociis <strong>natoque</strong>. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_fourth]

[av_one_fourth]
[av_icon_box icon='125' position='left' title='Updates']
Cum sociis natoque <strong>sadfsadfas </strong>Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_fourth]

[av_one_fourth]
[av_icon_box icon='36' position='left' title='SEO Optimized']
Aenean commodo ligula eget dolor. <strong>Aenean massa</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]
[/av_one_fourth]

[av_section color='main_color' custom_bg='' src='http://kriesi.at/themes/enfold/files/2013/10/woman-flinging-long-hair-1500x1000.jpg' attachment='2576' attach='parallax' position='top left' repeat='no-repeat' video='' video_ratio='16:9' min_height='75' padding='default' shadow='no-shadow' id='']
[av_one_third first]

[av_icon_box icon='ue806' font='entypo-fontello' position='top' title='Mobile Ready' link='' linktarget='' linkelement='']
Cum sociis <strong>natoque</strong>. Aenean commodo ligula eget dolor. Aenean massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]

[/av_one_third][av_one_third]

[av_icon_box icon='ue836' font='entypo-fontello' position='top' title='SEO Optimized' link='' linktarget='' linkelement='']
Aenean commodo ligula egconsectetueret dolor sit amlor. <strong>Aenean massa</strong>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
[/av_icon_box]

[/av_one_third][av_one_third]

[av_icon_box icon='ue842' font='entypo-fontello' position='top' title='Free Support' link='' linktarget='' linkelement='']
Aenean commodo ligula eget dolor. Lorem <strong>ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque<strong> </strong>Aenean massa.
[/av_icon_box]

[/av_one_third]
[/av_section]

[av_section color='main_color' custom_bg='' src='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' video_mobile_disabled='' min_height='' padding='default' shadow='no-shadow' id='']
[av_one_fourth first]

[av_textblock]
<h6>Recent News</h6>
<em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em>

<a href="#">View more</a>
[/av_textblock]

[/av_one_fourth][av_three_fourth]

[av_postslider link='category,3' columns='3' items='3' contents='title' autoplay='no' interval='5']

[/av_three_fourth][av_hr class='default' height='50' position='center']

[av_one_fourth first]

[av_textblock]
<h6>Recent Work</h6>
<em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</em>

<a href="#">View more</a>
[/av_textblock]

[/av_one_fourth][av_three_fourth]

[av_postslider link='portfolio_entries' columns='3' items='3' contents='title' autoplay='no' interval='5']

[/av_three_fourth]
[/av_section]

[av_section color='socket_color' custom_bg='' src='http://kriesi.at/themes/enfold/files/2013/10/photodune-3581207-black-in-black-m-1500x1182.jpg' attachment='2572' attach='parallax' position='top left' repeat='stretch' video='' video_ratio='16:9' min_height='75' padding='large' shadow='no-shadow' id='portfolio']
[av_heading heading='A beautiful <strong>experience!</strong>' tag='h1' color='custom-color-heading' custom_font='#ffffff' style='blockquote modern-quote modern-centered' size='50' subheading_active='subheading_below' subheading_size='18' padding='60']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

[/av_heading]

[av_one_fifth first]

[av_font_icon icon='ue826' font='entypo-fontello' style='border' caption='Eye Candy' link='manually,http://kriesi.at' linktarget='' color='#ffffff' size='40px' position='center']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
[/av_font_icon]

[/av_one_fifth][av_one_fifth]

[av_font_icon icon='ue856' font='entypo-fontello' style='border' caption='Tools' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center']
We have added exactly the tools you need and left out everything you don't need. Finally a multi purpose Theme that is not bloated!
[/av_font_icon]

[/av_one_fifth][av_one_fifth]

[av_font_icon icon='ue8a5' font='entypo-fontello' style='border' caption='A list' link='post,94' linktarget='' color='#ffffff' size='40px' position='center']
<ol>
<li>Super nice Parallax</li>
<li>Optimized for Speed</li>
<li>Brilliant Template Builder</li>
<li>Easy to use</li>
<li>Set up in 2 minutes</li>
</ol>
[/av_font_icon]

[/av_one_fifth][av_one_fifth]

[av_font_icon icon='ue8a8' font='entypo-fontello' style='border' caption='Updates' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center']
Enfold is an award winning theme that is quickly becoming one of themeforest top sellers. And for a reason! Try it yourself!
[/av_font_icon]

[/av_one_fifth][av_one_fifth]

[av_font_icon icon='ue8dd' font='entypo-fontello' style='border' caption='Rocket Science?' link='manually,themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=kriesi' linktarget='' color='#ffffff' size='40px' position='center']
Far from! Probably the easiest Multipurpose theme you have ever used!
[/av_font_icon]

[/av_one_fifth]
[/av_section]

Best regards,
Rikard

Hi,

Great! Glad you figured it out!
Using the code as following should work better though

@media only screen and (max-width: 480px) {
.av-image-caption-overlay-center {font-size: 12px!important; padding-left:15px !important;}
}

Let us know if you have any other questions or issues :)

Best regards,
Yigit

Hey khalid777,

On the post you linked to the font size is 18 pixels, did you manage to get it working?

Thanks,
Rikard

Hey Julie,

Thank you for using Enfold.

The page id of the “about” page is “page-id-18” and the id of the “group-retirement” is “page-id-2330”. Append that to the existing selectors above. And you don’t need to declare multiple css media queries if they are targeting the same screen width. For example, the code above can be replace with:

@media only screen and (max-width: 480px) {
/* adjust slider height on small mobile portrait views */
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img{
height: 120px !important;
}

/* adjust caption locations on small mobile portrait views */
.caption_bottom .slideshow_caption {
top: 150px !important; left: 1.5px !important;
bottom: auto !important;
}

/* adjust slider caption title font size on small mobile portrait views */
.responsive #top .slideshow_caption h2 {
font-size: 16px !important;
}

/* adjust slider caption font size and line height on small mobile portrait views */
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content {
font-size: 10px;
line-height: 12px;
}
}

Best regards,
Ismael

Hey wienerpresswerk,

That happens because you have following custom CSS code

@media (max-width: 979px) and (min-width: 768px) {
div.avia_textblock p {
    color: rgb(71, 71, 71) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: justify !important;
    vertical-align: top !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin-top: 5px !important;
    margin-right: 15px !important;
    margin-bottom: -15px !important;
    margin-left: -5px !important;
}}

Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your element to give it a custom class and then change your code to following one

@media (max-width: 979px) and (min-width: 768px) {
.your-custom-class p {
    color: rgb(71, 71, 71) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: justify !important;
    vertical-align: top !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin-top: 5px !important;
    margin-right: 15px !important;
    margin-bottom: -15px !important;
    margin-left: -5px !important;
}}

Best regards,
Yigit

Hey!

I changed your code to following one

@media only screen and (max-width: 480px) {
h2.avia-caption-title { font-size: 14px !important; }
.caption_bottom .slideshow_caption .slideshow_inner_caption { padding: 0 !important; }
}

@media only screen and (max-width: 1024px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none!important; }}

@media only screen and (max-width: 1024px) and (min-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 124px !important;
}}

and there was an additional ” which should not be there in your custom CSS, i removed it. Please review your website now

Best regards,
Yigit

Hi,

Thank you for using Enfold.

You cannot replace the text but you can hide it or adjust the font size:

@media only screen and (max-width: 768px) {
.responsive #top .slideshow_caption h2.avia-caption-title {
    font-weight: 400 !important;
    font-size: 11px !important;
}
}

Best regards,
Ismael

Hi,

Using the shortcode should be enough. We added the shortcode in the “Home” menu label. Please adjust the shortcode settings (font size, alignment etc) as needed.

Best regards,
Ismael

Hey stedia,

You can enable custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your elements and give them custom CSS classes for them and then add following code to Quick CSS

@media only screen and (max-width: 480px) {
.your-custom-class .av-special-heading-tag { font-size: 20px !important; }}

Best regards,
Yigit