Hi,
I have checked your test page, but I’m not seeing a “scrolling up and down the color section bands would continue to increase in height with each scroll”
When the page is loaded, the sections do move up for the “Fold Animation Duration” in the columns in the color sections, but they don’t move on scroll.
The inline height css is from the javascript that calculates the of the section height based on the content of the section and the height of the page since the color sections use that for the height as per the color section options. But when I scroll on desktop or mobile do not change.
Perhaps you could change it to a fixed height like 200px, or so and see it that helps.

I also note that above you first write: “scrolling up and down the color section bands would continue to increase in height with each scroll”
Then: “inline height style is applied, and increased, each time the window size is changed.”
Do you mean both are happing?
As for “inline height style is applied, and increased, each time the window size is changed.” this is for the javascript that I explained above, when the window size is changed the javascript needs to recalculate.

Best regards,
Mike

Hey circolosportivoparcodeipini,

The update to 6.0.9 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/

Best regards,
Rikard

Hey jorge,

First off, you should update the theme to the latest version. The update to 6.0.9 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/

After that, then please refer to this: https://kriesi.at/documentation/enfold/typography/

Best regards,
Rikard

Hi,
I don’t believe that lazy loading will work in this case.
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save.

Best regards,
Mike

Hey reqonsult,

Thank you for the inquiry.

You can add this css code to hide the scroll-to-top button:

#scroll-top-link {
   display: none;
}

Another option is to override the footer.php file and remove this line of code:

<a href='#top' title='<?php _e( 'Scroll to top', 'avia_framework' ); ?>' id='scroll-top-link' <?php echo av_icon_string( 'scrolltop' ); ?> tabindex='-1'><span class="avia_hidden_link_text"><?php _e( 'Scroll to top', 'avia_framework' ); ?></span></a>

Best regards,
Ismael

Hi,

We added the css again. Please make sure to purge the cache before checking.

.responsive.js_active #top .av-layout-tab {
   display: block;
   float: left;
}

Best regards,
Ismael

Hi,
Your best solution will be to create two slideshows with portrait sized images for mobile, using your desktop landscape images for mobile will typically not look good on mobile.

Best regards,
Mike

Hey lara666,

Thank you for the inquiry.

You can add this css code to adjust the style of the icon list title:

#top #wrap_all .avia-icon-list-container.av-m6zynu03-656fee89931be518806dc34f25ba77ad .av_iconlist_title, #top #wrap_all .avia-icon-list-container.av-m6zyi7hq-1697bf2386f7aa527bd05b8b90479d05 .av_iconlist_title {
    font-size: 13px;
    color: #969696;
    font-weight: 400;
    font-family: 'open sans', Helvetica, Arial, sans-serif;
}

Best regards,
Ismael

Hi,

You can add this css code to adjust the position of the mobile menu items:

#top #av-burger-menu-ul {
    display: table-cell;
    vertical-align: top;
    top: -10px;
    position: relative;
}

Let us know if you need more assistance.

Best regards,
Ismael

Hey xfacta,

Thank you for the inquiry.

Did you add the following css code or adjust the style of the paragraph element in the Enfold > Advanced Styling panel?

#top .all_colors p {
    font-size: 16px;
    line-height: 1.7em;
}

This overrides the custom element styling on mobile view.

Best regards,
Ismael

Hey tebitron gmbh,

Thank you for the inquiry.

You can add this css code, but the video will only be partially visible — some parts may get cut off or overflow outside the screen.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #av_section_1 .av-section-video-bg video {
    background-size: cover;
  }
}

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Augeundso,
A child theme allows you to add customizations to core element files that you don’t want to lose on your next update.
For example, if you wanted to customize a element like the contact form, and you found a solution that says add some PHP code to your functions.php file, the next time you update you will lose this code. If you don’t need this kind of customization, you will be fine.
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add your code and save.
You can add a child theme at any time, follow these steps: child theme

Best regards,
Mike

Hi,
I made an adjustment so now the image is on the right side, but your titles are too large and long, so I added this css to brake your text so the element lines up good:

.avia-timeline h2.av-milestone-date>strong {
	width: 200px;
	font-size: 20px !important;
	overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

you can adjust the font size and width to suit, but there is not a lot of options.
You may try making the page width 100% with this css:

.responsive #top.page-id-19 #after_tab_section_1 .container {
	max-width: 100%;
}

and then make the font size and width larger to suit.

Best regards,
Mike

Hi,

#top #main a:where(:not(.wp-element-button,.avia-button)) {
    text-decoration: underline;
}
#top #main a:hover:where(:not(.wp-element-button,.avia-button)) {
    color: #fff;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
The ID for “av-m1yjw3j3-8de8ef07635f179e0beedc245c4c38a7” is “sub_menu1”

so replace the class in your css “av-m1yjw3j3-8de8ef07635f179e0beedc245c4c38a7” with the ID “sub_menu1”
You also have an extra “bracket” in your css, probably braking it.

/*A B C ……..*/
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top #menu-dialektwoerter > li {
  padding: 2px 0;
  display: inline-block;
  }
  
  #top #menu-dialektwoerter {
  padding: 10px 0;
  }
  
  #top #sub_menu1 {
  width: 40px;
  }
  #top #sub_menu1 {
  position: fixed !important;
  right: 0;
  top: 10px;
  width: 50px;
  }
  #top #sub_menu1 + .sticky_placeholder {
  height: 0 !important;
  }
  }

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Is the problem that the first page submenu is:
A B C D E
and the second page submenu is:
A B C D

Best regards,
Mike

Hi,

@media only screen and (max-width: 768px) {
    .avia-caption-content p {
        font-size: 40px !important;
        line-height: 32px !important;
    }
}
@media only screen and (max-width: 479px) {
    #top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
        font-size: 50px;
        line-height: 43px;
    }
}

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 768px) {
.avia-caption-content p {
font-size: 40px !important;
}
}
#top.home .av-special-heading.avia-builder-el-5 {
    margin-top: 0;
}

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

Best regards,
Mike