Hi,
I see you are using a caching plugin, please try disabling it and adding the css to the WordPress ▸ Customize ▸ Additional CSS field.
Also try disabling the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression options and at the bottom of the same option page enable the Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files option.
I’m pretty sure this should work because I tested by injecting it into the browser, please see the screenshot in the Private Content area.
If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Glad this helped, for the burger menu try this css:

#top #header #av-burger-menu-ul {
    vertical-align: top!important;
    padding: 0!important;
}

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey pontedellarco,
Please include a link to these titles are red instead of blue so we can examine them.

Best regards,
Mike

Hey Julio,
Thank you for the link to your site, I see that you are using image elements as links to your pages, so there is not and automatic way for the image elements to get the post date of your “posts”, have you thought about using Posts instead of Pages? If you use posts then you can use the blog element to show your images and the date, even though your posts are created via the Advanced Layout Builder. To do this, after you make the posts, select “excerpt only” in the blog element:

then use this css to hide everything except the date:

.avia-content-slider .slide-content,
.avia-content-slider .slide-meta .slide-meta-comments,
#main .avia-content-slider .slide-meta .slide-meta-del {
	display: none;
}
#main .avia-content-slider .slide-meta {
    padding: 0;
	margin: 0;
}

The expected results

so this would make it all automatic for you going forward, but if you want to use your current set up then you could add the date to your image element as you create them, it would not be automatic but you are going to be choosing an image anyways so it should be easy enough to just add a date. To do this allow the Image Caption to show and add the date:

then “clear” the Caption Overlay Background Color and choose black for your caption text color:

then disable the animation and choose to always display the caption:

then add this css:

#top .av-image-caption-overlay {
    height: auto;
    width: auto;    
    left: 0px;
    bottom: 0px;
}

#top .av-image-caption-overlay-center {
  padding: 0;
}
#top .avia_image  {
  margin-bottom: 30px;
}

the expected results:

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Very good, we will keep this open until we hear back from you.

Best regards,
Mike

Hi,
Glad Yigit was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Ralf,
Thanks for your question and for the test page, please try adding this css to remove the white sidebars and to increase the height to 70vh, I assume that you want to see the footer, if not then adjust to 100vh:

@media only screen and (max-width: 767px) {
.responsive #top.page-id-139 #wrap_all #main #av_section_1 > .container {
    width: 100%;
    max-width: 100%;
}
.responsive #top.page-id-139 #wrap_all #main #av_section_1 > .container > .av-content-full {
    height: 70vh;
}
}

Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hi,
Thanks for the feedback and the links & screenshots, so those 3 pages are using the color section in a different way, two of them contain videos, and one is text, none have background images and none should have the css you are working on for the /daily-word-all/ page, so the error here is that the css above is too general with the target of the css rule #av_section_1 is causing a conflict.
So try removing your previous css, add a custom class to your /daily-word-all/ page color section like: title-color-section

then this css:

@media only screen and (max-width: 475px) {
#top #main .title-color-section {
   background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}
}

Now about this css, I removed the height because you already have the height set in the element to 600px, and you seem to want this height for mobile also, so there is no need to declare it again, if you want a different mobile height then go ahead and add it. You don’t need to add background-size: cover twice, this one is for mobile, if you always want this for desktop & mobile then use this css instead:

#top #main .title-color-section {
   background-size: cover !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
}

you will note that I added #top #main this adds specificity to ensure it is not overwritten.

Best regards,
Mike

Hi,
Thank you for the link to your page, as Guenni007 has pointed out the ampersand filter is being applied, please try adding this in your child-theme functions.php
add_filter('avia_ampersand','__return_false'); Thanks Guenni007

Best regards,
Mike

Hi,
Sorry, I thought you didn’t want the color section to be as large as it is, if you do want the color section to take up most of the mobile screen then the css you have is working correctly. Please see the screenshot in the Private Content area.

Best regards,
Mike

Hey pontedellarco,
Please include admin login in the Private Content area and a link to the page with this issue so we can be of more assistance.

Best regards,
Mike

Hey ycoleman31,
Thank you for your patience, I didn’t find what was causing this error so I have submitted it to the Dev Team for review, but in the meantime I added this css to your Quick CSS to correct:

#top a[aria-controls="av-tab-section-1-1"] .av-tab-arrow-container span {
    background-color: #e74480;
}
#top a[aria-controls="av-tab-section-1-2"] .av-tab-arrow-container span {
    background-color: #333333;
}
#top a[aria-controls="av-tab-section-1-3"] .av-tab-arrow-container span {
    background-color: #72cac8;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
It looks like you have the color section height set to 600px

so you can choose to use a percentage so the mobile screen will be less:

or use this css to set a specific size for mobile:

@media only screen and (max-width: 767px) { 
#av_section_1 > div > .av-section-cont-open {
	height: 308px !important;
}
}

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

Best regards,
Mike