see here responsiveness with color-section – but if content is determing the container height of the color section this will not work.
With all its settings like transparency and overlay color.
very important: the color-section has no padding no min height !!!
and the color-section gets the custom class: resp-container

https://webers-testseite.de/responsive-videobackground/

the code is set for that page only – you have to adapt this to your needs – maybe you omit the if-clause
this comes to functions.php of your child-theme:

function responsive_background_video(){
if ( is_page(32661)){
?>
<script>
(function($){
	$('body').on('DOMNodeInserted', function(){
		$('.resp-container iframe').addClass('resp-iframe');
		$('.resp-container').css({
		"position": "relative", 
		"overflow": "hidden" , 
		"padding-top": "56.25vw"
		});
		$('iframe.resp-iframe').css({
		"position": "relative", 
		"top": "0" , 
		"left": "0", 
		"width": "100vw" ,
		"height": "56.25vw" ,
		"border": "0",
		"-webkit-transform": "scale(1.4)",
		"-ms-transform": "scale(1.4)",
		"transform": "scale(1.4)"
		});
		$('.resp-container .av-section-color-overlay').css({
		"top": "-56.25vw" 
		});
	});	
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'responsive_background_video');

this is for 16:9 Videos only

by the way – very nice trick with DOMNodeInserted

by the way – there are some jQuery scripts which did that job for you.
if there was an image with same name but with a given suffix ( guenni2.jpg versus (Email address hidden if logged out) ) and the pixel ratio is more than 2 it will show the alternative image.

you can see it here: http://webers-testseite.de/weber/retina/

the image on the left is the same resolution as the guenni2.jpg but i renamed it to guenni1.jpg
on the right there is the guenni2.jpg – if you look to that right image on retina displays the better resolution image is shown. ( (Email address hidden if logged out) )

yes it is best influence if you do the custom-class to the p tag or span where your text is in.
But it will work too if you do the class to a parent container.
see example here https://webers-testseite.de/hyphenator/
you see on the first two columns that there are dashes at the end of a line – and break the word with grammatical rules.

_________________

But looking to your Examples i think you are talking about something different.
You can influence Words behavior on shrinking screen width. A lot of Enfold Headings do not break on very small screens. This might result in an overlapping heading over the container border.

you can set this via css – see here the usage with trials :
https://www.w3schools.com/cssref/css3_pr_word-break.asp :try

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp :try

https://www.w3schools.com/cssref/pr_text_white-space.asp :try

https://www.w3schools.com/cssref/css3_pr_hyphens.asp :try

on a lot of input fields you can enter manual “predetermined breaking point” for example for long headings – where you like to decide where a word break:
soft hyphen = discretionary hyphen ­ or &#173

the last code you have to set a semicolon after the 3 – boardsoft did change it imediately – even if i insert it in code tags here

by the way – you can style a text-block as you like it and insert that shortcode to that copyright input field like:

[av_textblock]<img class="alignright size-full" src="https://www.weddingplannersintuscany.com/wp-content/uploads/2018/07/rmw-thelist-official-supplier.png" width="120" height="120" />Wedding Planners in Tuscany by Luccaorganizza Viale Agostino Marti,
415 - 55100, Lucca. Email:  (Email address hidden if logged out) 
Phone +39 0583 952440 • Mobile +39 328 2930862 • P.IVA 01616520464.[/av_textblock]

if you got a shop cart symbol there – it might be better to move the social bookmarks before the nav
i changed the code in the topic on top too – because this is more logical to do it the other way round

function change_menu_position() { 
?>
<script>
(function($){
	$('.main_menu ul.social_bookmarks').insertBefore($('.main_menu div.avia-menu'));
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_menu_position');

PS: no adjustment needed as i can see on your site – looks good

ah sorry for missunderstanding – i see your issue now.

about 140 topics started – and you realy don’t know how to use the code tag here on board.?
If you want to have such a long code checked, it would be good if we didn’t have to edit it a lot. Because Boardsoft converts many tags and special characters to other characters.
this is very time-consuming

and by the way – what should a linebreak in a code-block do?
this is the code for the path to your child-theme/lang folder to activate for child lang files

function language_file_child_theme() {
    $lang = get_stylesheet_directory().'/lang';
    return $lang;
}
add_filter('ava_theme_textdomain_path', 'language_file_child_theme');

do not forget to empty all cache you use (browser cache, enfold merged files, other plugins)

ok – this seems to be not working anymore on the newest enfold:

add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2); 
function enfold_customization_postnav($entries, $settings) {
    $entries['prev'] = get_next_post($settings['same_category']);
    $entries['next'] = get_previous_post($settings['same_category']);
    return $entries;
}

there is something new on Enfold 4.4.1 – so please try:

add_filter( 'avia_post_nav_entries', 'enfold_customization_postnav', 10, 2); 
function enfold_customization_postnav($entries, $settings) {
    $entries['prev'] = get_next_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
    $entries['next'] = get_previous_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
    return $entries;
}

but this works on my 4.4.1 install:

add_filter('avia_post_nav_settings', 'avia_post_nav_settings_mod');
function avia_post_nav_settings_mod($settings)
{
  if(is_singular('portfolio')) {
    $settings['taxonomy'] = 'portfolio_entries';
    $settings['same_category'] = true;}
  return $settings;
}

as i said above – there is a custom class to which the hyphenation goes.
Class name of content to hyphenate is on default : hyphenate

if you got now a text-block element give him that custom class.

I think the best thing will be to edit the translation files itself.

• This reply was modified 6 years, 11 months ago by Guenni007.

hm stange – you see here on Enfold 4.4.1 that portfolio – it has only one other portfolio in the same “category” = frontside
and you see that there is only that other portfolion in the left right navigation: https://webers-testseite.de/portfolio-item/pirol-hifi/

and you realy mean mobile devices and not smaller screens?

you can try this:

.avia_mobile .home #av_section_1 .av-parallax {
    display: none !important;
}

.avia_mobile .home #av_section_1  {
  background: #7db9e8;
	background: -moz-linear-gradient(45deg,  #7db9e8 0%, #ffffff 80%);
	background: -webkit-linear-gradient(45deg,  #7db9e8 0%,#ffffff 80%);
	background: linear-gradient(45deg,  #7db9e8 0%,#ffffff 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#ffffff',GradientType=1 );
}

.avia_mobile .home #av_section_2 .av-parallax {
    display: none;
}

.avia_mobile .home #av_section_2  {
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #DDDDDD));
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 0%, #DDDDDD 100%);
}

the link to your image is correct – but your css entry has a different link !

this is what is in your css:

.myicon .av-icon-char {
    background-image: url('http://wpg.com.gridhosted.co.uk/wp-content/uploads/dynamic_avia/wpg.com.gridhosted.co.uk/wp-content/uploads/2018/07/myicon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

maybe you have to erase the old merged css files of your enfold !

• This reply was modified 6 years, 11 months ago by Guenni007.