inconsistent look of heading and buttons

Hey Tilman,

Could you post screenshots highlighting the problems please?

Best regards,
Rikard

Hi,

Thank you for the screenshot.

The sections starting from GANZHEITLICHE BETRACHTUNG IHRER WEBSITE are outside the wrap_all container, which is why the styling of some elements are a bit different. This usually means that there are html tags in the page that have not been closed properly. Please check the previous sections and look for any invalid html tags.

Best regards,
Ismael

Hey Tilman,

Have you added Strong tags? If you have, please make sure that they are opened and closed properly as following

<strong>This is my strong text</strong>

If you would like us to look into it, please create temporary admin logins and post them here privately :)

Regards,
Yigit

Hey,

It seems like empty Grid Row elements you used to display a border were causing the issue. I deleted Grid Row elements from above 5th and 6th section, edited 5th and 6th section and gave them custom CSS class “top-border-cs” in Advanced > Developer Settings and then added following code to bottom of Quick CSS in Enfold theme options > General Styling

#top #wrap_all #main .avia-section.top-border-cs {
  border-top: 5px solid #008d8f;
}

If you would like to display the same border on other sections, please give them “top-border-cs” custom CSS class to them as well.

Please review your website :)

Regards,
Yigit

Hi Tilman,

Shortcode of “Easy Table of Contents” plugin is breaking the layout. Deactivating fixes it. I think the issue with Grid Row element is also related to it. I do not have any experience with the plugin. Is there any custom HTML added into it?

Best regards,
Yigit

Hi,

I toggled to load from JavaScript instead of Pure CSS but that did not make any difference. Unfortunately I do not have any experience with the plugin as I mentioned. Could you please contact plugin authors and see if they have any insights on what could be causing the issue?

As an alternative, you could try creating a new widget area in Appearance > Widgets, add Enfold Table of Content widget to your widget area and then display that widget using Widget Area element on your page :)

Regards,
Yigit

Hi Tilman,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

/* No capitals */
.avia-toc-style-elegant a {
  text-transform: none;
}
/* Font size for level 1 */
.avia-toc-style-elegant .avia-toc-level-1 {
  font-size: 20px;
}
/* Font size for level 2 */
.avia-toc-style-elegant .avia-toc-level-2 {
  font-size: 18px;
}
/* Style toggle button */
.toc-toggle {
  background: transparent;
  border: none;
  font-size: 20px;
}

Then add following code to bottom of functions.php file of your child theme to add toggle button to TOC

add_action('wp_head', 'toggle_toc');
function toggle_toc(){
 ?>
 <script>
 jQuery(window).load(function(){
	var $input = jQuery('<input class="toc-toggle" type="button" value="≡" />');
    $input.prependTo(jQuery(".avia_auto_toc"));
	 
	jQuery( ".toc-toggle" ).click(function() {
	jQuery( ".avia-toc-container" ).toggle();
});
	 
});
 </script>
<?php 
}

Best regards,
Yigit