Hi,

You can have a look but you’ll need to add this to your hostfile because it’s not directly visible

Cheers,

Steven

Hi,

Worked. Thanks!

Hi,
I’m not sure if we are on the same subject. Again, that’s what you do in a normal page (show hide content sections based on screen) but this page is one generated by Events Calendar so therefore we had to use this code with shortcode and put it in functions.php in order to have the slider displayed. Latest thing I tried was:
Enable debug mode, used the advanced layout editor, added a slider with screen options (not showing on smaller screens) and below my mobile image with screen options (hide on larger screens.
This is de code I’ve put in the functions.php:

/*
  * Layer slider in Tribe Events List page and Single Event page
  */ 
add_action('ava_after_main_container', 'avf_tribe_events_before_html_slider', 10, 1);
function avf_tribe_events_before_html_slider($before) {
	if( is_post_type_archive('tribe_events') ) {
	  echo do_shortcode("[av_slideshow_full size='no scaling' min_height='0px' stretch='' animation='slide' conditional_play='' autoplay='false' interval='5' control_layout='av-control-default' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll' av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' av_uid='av-nordxb' custom_class='']
[av_slide_full slide_type='image' id='642' video='http://' mobile_image='' fallback_link='http://' video_format='' video_ratio='16:9' title='' custom_title_size='' custom_content_size='' caption_pos='caption_bottom' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' font_color='' custom_title='' custom_content='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-p7aoxr' video_controls='' video_mute='' video_loop='' video_autoplay='' overlay_enable=''][/av_slide_full]

[/av_slideshow_full]

[av_image src='https://www.vakantiepas.nl/site2018/wp-content/uploads/2018/03/mobile_header.jpg' attachment='759' attachment_size='full' align='center' styling='no-styling' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' copyright='' animation='no-animation' av-desktop-hide='aviaTBav-desktop-hide' av-medium-hide='aviaTBav-medium-hide' av_uid='av-jivm3mwy' custom_class='' admin_preview_bg=''][/av_image]"); 
	}
}

Result is that both show up on large screens as well as mobile screens. See screenshot here.

Hi Yigit,

That’s what you do in a normal page (show hide content sections based on screen) but this page is one generated by Events Calendar so therefore we had to use this code with shortcode. I do see mobile_image='' fallback_link='' in the shortcode but where do I select that option when adding a image to slider via the magic wand? See screendump. I can’t find that option here. It’s only visible when selecting a video.

Cheers,

Steven

Hi Victoria,

Thanks, that did the trick!

Regards,

Steven

Hi Rikard,
Thanks. That worked!

Regards,

Steven

Hi Mike,

Good point! Thanks again and you can close this thread.

Regards,

Steven

Hi Basilis,

Thanks for your reply. However, you guys use to give support on this matter hence these posts: https://kriesi.at/support/topic/color-section-to-overlap-layerslider and https://kriesi.at/support/topic/color-section-with-content-overlap/#post-766242

EDIT: After some fiddling around, I found a rather simple solution. Instead of giving the color section a negative margin, don’t.

Solution:
Color section: .yourclass {z-index: 999; position: relative;}
In column row settings check: Custom top and bottom margin and set top margin to negative. Uncheck: Use same value…

Regards,

Steven

• This reply was modified 7 years, 6 months ago by steviger.

Sure, see private content.

Hi Ismael,

It does displays the header in the Event List page (how do we get it full width). Changing av_slideshow_full size=’no scaling’ to av_slideshow_full size=’no scaling’ doesn’t do the trick.

BTW, after adding your code in the functions.php, it adds that header to the single event page as well. So I changed the statement under Layer slider in single post page and single event page: if( is_singular(array( 'post', 'tribe_events' to if( is_singular(array( 'post' I tested it and it works.

So basically the only question is how to get the header in your code full width.

Regards,

Steven

Not sure but it worked ;) Please see login details in PC.

Regards,

Steven

Hi Ismael,

Thanks for you reply. With your (and Rikard’s) solution, I got rid of the unwanted codes displayed. However, as I mentioned earlier, now the whole layout is a mess.
As you can see in de code, most fields should be next to each other : 1/3 2/3,1/2 1/2 etc.

Regards,

Steven

Hi,
In the meantime I tried to make an completely new form and page. The problems stilll persist. Any help is much appreciated ;)

Regards,

Steven

Hi Rikard,

Here you go!

Cheers,

Steven

Hi Nikko,

That’s the one. Thanks!

Regards,

Steven