Hi,
Sorry for the very late reply and thanks for the login, I believe I found the correct page, but it looks like you are testing the Modern Events Calendar Lite plugin instead of the Events Calendar plugin, has this helped your situation?

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for the link, for your [en] page please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
	html[lang="en-US"] #top.home #av_section_1 > div.container > main > div > div > div > section > div > p {
		margin: 0 !important;
		line-height: 50px;
		background: rgba(255,255,255,0.6);
	}
	html[lang="en-US"] #top.home #av_section_1 > div > main > div > div > div > div.hr.hr-invisible.avia-builder-el-3 {
		display: none !important;
	}
	html[lang="en-US"] #top.home #av_section_1 > div.container > main {
		vertical-align: bottom !important;
	}
	html[lang="en-US"] #top.home #av_section_1 > div.container > main > div > div > div {
		margin-bottom: 0px !important;
	}
}

After applying the css, please clear your browser cache and check.
Please see the screenshot in Private Content area of the expected results.

Best regards,
Mike

Hey rvga,
Sorry for the late reply and thanks for the links, please try adding this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top #main .sidebar {
    z-index: 0 !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, so the issue is the “Corona maatregelen” box in #custom_html-4 being on top of the content on scroll.
The #header z-index of 501 is affecting the widget even if it is set to zero. I believe this is because the #custom_html-4 is in the inner-container div, where the #custom_html-3 widget is in the #wrap_all div above the #header div, so the z-index of 501 doesn’t affect it.
Are you using the same hook for the #custom_html-4 widget area as you did for #custom_html-3?
Can I login and fiddle with it and the script?
So the goal is to show this box above 767px, but on scroll it needs to be behind the content?
If we can’t put #custom_html-4 in the #wrap_all div, or sort out the z-index, can we just hide it on scroll?

Best regards,
Mike

Hi,
Please include an admin login in the Private Content area.

Best regards,
Mike

Hi,
I tried to watch your video but I don’t have access, please change the file permissions.

Best regards,
Mike

Hi,
Thanks for the login, but the sticky mobile header seems to be working now, perhaps it was a caching issue? Please clear your browser cache and check.

Best regards,
Mike

Hi,
As I understand you would like the content to scroll over the header and menu & widgets, please try this css:

#header {
    z-index: 0 !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, the issue I see is that in your code you have wrapped all of the content in a paragraph (p) which you have added text-align: left; to.
In the code I posted the title is an H2, the text is an H3, this way they can be adjusted individually.
Please try this example under your example on the test page:

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<img class="size-medium wp-image-1959 alignleft" src="https://test.test/wp-content/uploads/2017/02/people-2-1-300x300.jpg" alt="" width="300" height="300" />
<h3>Ut nisi sem, sagittis sodales risus vel, fringilla lobortis ex. Suspendisse urna quam, laoreet nec bibendum quis, tincidunt eu turpis.</h3>
<a href="#">– link 1</a>
<a href="#">– link 2</a>
<a href="#">– link 3</a>
email address here

Please ensure the custom class for the column is dotted-border-new and add this css:

.dotted-border-new {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50' ry='50' stroke='black' stroke-width='4' stroke-dasharray='2%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: 50px;
	padding: 30px;
}
.dotted-border-new h2 {
	text-align: center;
}

This is the expected results

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

html body.page-id-11963 a.iconbox_icon[data-av_iconfont='fontello']:before {
    font-size: 90px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you, my previous edit of removing the rouge PHP ending tags from your functions.php seems to have solved the issue with the child theme crashing the site when activated.
When I checked only the header/menu looked different, I note that you have a “helper-main-menu.php” in your child theme, is this file modified? Is this file modified in the parent theme?
It could be that the menu needs to be selected in the child theme, I didn’t want to make changes so I didn’t try, please try the child theme and the menu settings.

Best regards,
Mike

Hi,
I took a look at your [EN] page and found that your “blog element” was set to show the full content, I changed it to the excerpt.
Please check

To apply CSS styles independent from the language settings, add your css to the WordPress > Customize > Additional CSS field.
To apply CSS styles based on the language settings, with WPML installed there is a theme panel for each language, each with it’s own Quick CSS.
If you are writing css for a specific language try using a language selector like this:

html[lang="en-US"] article .entry-title a {
	color: red !important;
}
html[lang="de-DE"] article .entry-title a {
	color: green !important;
}

Best regards,
Mike

Hi,
Please try following these steps to achieve this layout:

Are you still using “/?page_id=4727” as a test page? It doesn’t represent the steps in the solution. Please include an admin login in the Private Content area.

Best regards,
Mike

Hi,
Thanks for the feedback, I tested your site on WebPageTest.org and found that your “First
Byte Time” is 3.343s, this is 3s too slow, it should be about 0.343s or faster.
The whole page loaded in 13.179s – 14.586s
The FBT is due to your web server, there is not anything you can do to reduce that first 3s.
Your other content connections look ok until you get to the “fontello.woff2” font which is giving a 404.
Please see the test link below.
I also tested the same demo on my test server and the FBT was 0.566s and the whole page loaded in 5.233s – 7.220s “out of the box”.

Best regards,
Mike

Hi,
I don’t believe that parallax with work with a diagonal border, especially with IOS. But that aside I can see your point, I was able to achieve this with some custom classes and a little jQuery:

In this example, all color sections are set to 100% visual height and the middle color section is the target so it has the bottom diagonal border and it has the custom class target-flipped-diagonal-border .
Now we will add a bottom diagonal border to the section above, this will be our fake top diagonal border, and we will add the custom class flipped-diagonal-border to it.
This is the code you can add to the end of your functions.php file in Appearance > Editor:

function custom_flipped_diagonal_border_script() { ?>
    <script>
(function($) {
  $(document).ready(function(){
$('.flipped-diagonal-border .av-extra-border-element').css({'transform':'rotate(180deg) scaleX(-1)','margin-top':'0px'});
$('.target-flipped-diagonal-border').css({'margin-top':'-250px'});
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_flipped_diagonal_border_script');

Now the middle section has two diagonal borders over it, top & bottom.

Best regards,
Mike