Yes – you are playing with different sections on that to reach the sequence first contact form – than the map.
Your ID= termin is set to display none on small screens by yourself.
(done by alb options – screen options ___ im Alb Selber unter Erweitert: Element Sichtbarkeit gesetzt )
So where should the scroll go to?

you can reach that reverse order by css only

@media only screen and (max-width: 767px) {
	#termin {
	  display: flex !important;
	  flex-flow: row wrap;
	  justify-content: space-between;
	  align-items: stretch;
	}

	#termin .flex_cell:nth-of-type(1) {
	  order: 2;
	}
}

PS: warum ist es einmal in der Mitte platziert, und einmal am Ende?
Ich würde den “Termin” generell für beide Fälle nach unten nehmen.

what if you use html entities for them: http://unicode.e-workers.de/caron.php
Ž
see here for example : https://webers-testseite.de/lightboxes/
4th image on top : flowers 2 – click to see the lightbox image with alt text under it.

you have on that page with html entities a colored box on the bottom where you can choose groups to see like caron or Diaeresis ( Trema )
or language specific sortings

I believe that Nikko’s approach is the best method for someone with reduced visual acuity. Everything is enlarged, so that the fonts etc. are also easier to read.

But if you like to enlarge only those alb sings you can input some css to the admin area by child-theme functions.php
this is a kind of standard ( without your alb settings) that i often use with enfold:

// im Admin bereich das Eingabefeld des quick css verbreitern
function admin_head_mod() {
  echo '<style type="text/css">
  #avia_quick_css .avia_description {float: none;margin-bottom: 20px !important;padding-left: 0 !important;width: 98%}
  #avia_quick_css .avia_control {float: left;max-width: 98% !important;width: 98% !important}
  .avia_footer_links li {float: left;padding-right: 20px}
  .avia_footer .avia_footer_save {float: left}
  .avia_reset {display: none !important }
  #avia_options_page { max-width: 3000px!important}
  .avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-section_headers a.avia-modal-toggle-title { padding: 2px; margin: 3px 12px; font-weight: normal; background: #a3c0ed}
  .shortcode_insert_button { height: 100px; width: 140px;}
  .shortcode_insert_button img { opacity: 1; width: 60%;}
  </style>';
}
add_action('admin_head', 'admin_head_mod');

it removes the reset button – that it can not be used accidentically.
it enlarges the Enfold Options Screen in its width.
The Quick css Input field is set to 98% width of that container.
it highlighted the “toggle headings” but make them smaller

The shortcode_insert_button are now unfortunately only available in 40×40 resolution, which makes them blurred by enlarging them.

try this on quick css :

@media only screen and (min-width:768px) {
	.av_secondary_right .sub_menu {
		float: left;
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

maybe an !important might be necessary on the given rules like float or positon.

thanks Ismael – i now read on a page that:

If the settings under: Dashboard – Settings – Reading-Settings : “Your homepage displays” are left at default then the home page will return true for both is_front_page() and is_home()

so this was the fact on that test page – i do not know why the setting has been done – because i do always set the “home” only on Enfold Options Dialog.
If it is set on that Settings-Page is_front_page() is for both true – is_home() is only true for post-list (posts-page).

That was new to me that there is that dependency if it is set or not on : Dashboard – Settings – Reading-Settings : “Your homepage displays”
Or over the customizer : Homepage setting.

• This reply was modified 4 years, 10 months ago by Guenni007.

for more than one button row on the site:

function id_to_button_row_buttons(){
?>
<script>
(function($) {
	$('.avia-buttonrow-wrap').each(function(){
		var that = this;
		$('.avia-button', this).each(function(i){
			var ButtonRowID = $(that).attr('id');
			$(this).attr('id', ButtonRowID+'-button'+(i+1));
		});
	});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'id_to_button_row_buttons');

see here: https://webers-testseite.de/buttonrow/

have you ever tested your hamburger menu?
on my end it does not open!

the whole responsive case is in a mess – sorry to say that.

i would take on that logo a vector based image like svg:
The font ? maybe Troy or Mastro Sans – i think and the sign is a fibonacci spiral
If you tell me what font it is – it is easy to get the svg for it.

e.g.: like this – I have narrowed the Fibonacci spiral inwards, that looks better. : Link

PS: due to the poorer resolution of a png I can’t quite see where you went through the Fibonacci sequence – I think I drew a few more arcs.

@dumdeldidum: Ok – OK – but even if my solution leads more easily to success?
After all, with the pre-selection via this filter, Enfold has set all responsive settings.
By the way, you don’t write about a content width at the top.
__________

@ismael
i know that and wrote that the page on that test page set as “home” page is a static page so is_home() had to work.
But it does not. So that was my question:

1) if you have them in 1/2 column : set them to equal height then there will be a “Vertical Alignment” Option – set it to middle

2) best would be to have a custom-class on those galleries you like to influence in that way.

but to see how it looks like – put this to your quick css:

.avia-gallery .avia-gallery-thumb {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: space-between;
}

play with the justify-content value : center, space-around, space-evenly
to see the difference

you can try it without css settings – so remove the settings from above and see if this will better fit to your needs
– well i first thought we can do this via child-theme functions.php :

function av_change_header_layout($header){
    if(!is_front_page()){
      $header['header_custom_size']   =  '45';
      $header['header_shrinking']   =  'disabled';
      $header['header_class'] .= " av_header_shrinking_disabled";
    }
    return $header; 
}
add_filter('avf_header_setting_filter','av_change_header_layout');

but the shrinking disabled does not work – i do not know why?

but the other way round works

:
Set the options like you want to have it for all pages ( but take custom value 45px and non shrinking header )
then this on child-theme functions.php:

function av_change_header_layout($header){
    if(is_front_page()){
      $header['header_custom_size']   =  '150';
      $header['header_shrinking']   =  'header_shrinking';
      $header['header_class'] .= " av_header_shrinking";
    }
    return $header; 
}
add_filter('avf_header_setting_filter','av_change_header_layout');

if you like to include another page to that settings – use a page array or any other conditional tags : https://codex.wordpress.org/Conditional_Tags

• This reply was modified 4 years, 10 months ago by Guenni007.

on a button alb you have more styling options even for hover style –
but if you like to have it for button-row – you can select the buttons in a button-row by counting them and select via :nth-of-type(2) etc.

.avia-buttonrow-wrap .avia-button:nth-of-type(1) {
… some css rules
}

or you follow this topic here to have for each button in a button-row a unique ID:
https://kriesi.at/support/topic/individual-id-for-buttons-in-button-row/#post-1232985

Give an absolute width (or height) to them not a relative like auto or %
it could be a very big value – the rest will be done by display options of the surrounding container.

f.e. :

img[src*=".svg"] {
    width: 2500px;
    display: block;
}

The above is not all you need – but an overview what is the clou on it.
There’s a lot to do. Some in the child-theme functions.php and then in quick css. Whereby you have to find out what needs to be removed from the one set so far.
I just wait and see if there is still interest in the solutions. Unfortunately it was more often the case that I wrote some detailed descriptions with pictures and then suddenly another solution, e.g. a different header constellation, was used.

what was the source for those png’s ?
Do you have any illutrator files of that file – or an eps – sometimes eps are vectorbased too.

but if there is no vectorbased source on that – it will work because the letters are under that logo sign.
So when setting the header-scrolled to overflow: hidden it will do the job too:
See example page.