Hi,

You have to remove the width property from this css code to keep the logo from being distorted:

.logo, .logo a {
    overflow: visible;
    height: 100px;
    background-color: #075195;
    border-bottom-right-radius: .3125rem;
    border-bottom-left-radius: .3125rem;
    width: 12.5rem;
}

And to replace the dashes with bullets, add this css code:

.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
    height: 3px;
    opacity: 1;
    border: none!important;
    width: 3px;
    border-radius: 100%;
}

Best regards,
Ismael

Hi,

If you’re using the Posts Slider element or the Blog Posts element in Grid Layout, you can use the avia_post_grid_query filter to modify the query or adjust the item sorting.

Example:

— https://kriesi.at/support/topic/remove-current-portfolio-post-from-related-portfolio-grid/#post-836906
— https://kriesi.at/support/topic/sort-blog-posts-element-ascending/#post-1001791
— https://kriesi.at/support/topic/add-a-order-by-attribute-on-portfolio-grid/#post-1015617
— https://kriesi.at/support/topic/add-event-date-to-portfolio/#post-1479828

Best regards,
Ismael

Hey rixi,
I notice that on mobile not all of the dates show, only every other one, so to correct try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, 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 bellow code and save.

function custom_timeline_script_for_mobile() { ?>
  <script>
document.addEventListener('DOMContentLoaded', () => {
  // Check if there are any .av-milestone-even elements
  const milestones = document.querySelectorAll('.av-milestone-even');
  if (milestones.length === 0) return; // Exit if no milestones found

  // Define the media query for screens smaller than 989px
  const mediaQuery = window.matchMedia('(max-width: 989px)');

  // Function to reorder elements
  const reorderMilestones = () => {
    if (mediaQuery.matches) {
      milestones.forEach(milestone => {
        const date = milestone.querySelector('.av-milestone-date');
        const icon = milestone.querySelector('.av-milestone-icon-wrap');
        const content = milestone.querySelector('.av-milestone-content-wrap');

        // Ensure all elements exist before reordering
        if (date && icon && content) {
          milestone.innerHTML = '';
          milestone.appendChild(date);
          milestone.appendChild(icon);
          milestone.appendChild(content);
        }
      });
    }
  };

  reorderMilestones();
    mediaQuery.addEventListener('change', reorderMilestones);
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_timeline_script_for_mobile', 99 );

Then I notice that one of your content boxes has too much padding for the list:

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

@media only screen and (max-width: 989px) {
    .av-no-preview ul.avia-timeline-vertical .av-milestone-content li {
        padding: 0;
    }
}

Changing the content padding and font size of the title and content may also help:

@media only screen and (max-width: 989px) {
    .avia-timeline-boxshadow .av-milestone-contentbox {
    padding: 1em;
    }
    #top #wrap_all .all_colors h4.av-milestone-title {
    font-size: 20px;
    }
    .av-milestone-content p,
    .av-milestone-content li {
    font-size: 12px;
    line-height: 18px;
    }
}

Try this and adjust to suit.

Best regards,
Mike

Hey jkos,
When you set the background image to Scale to fit it scales image, so the whole image is always visible, this includes the height. Which is why the image does not reach the sides.
At Stretch to fit it stretches the image width to cover the page, less the 50px padding that the page has by default.
The height of your column is not set so the content is determining the height, but you have little content so the whole background image is not shown. If you set the column height to 150% then it will show.
But I recommend trying the color section instead because the background image will then be full width. I created a test page linked below to demonstrate.
Since the color section wants to vertically center the content, I added this css to the bottom of the page so your content will be higher:

.responsive #top #wrap_all .avia-section.av-minimum-height-99vw .container {
    display: flex;
    justify-content: center;
    margin-top: 15%;
    max-width: fit-content;
}

The reason your text is off the screen for mobile is because your text has 800px padding, which is larger than a mobile screen:

to correct this you could change it to a percentage, or for this I created a css grid for two columns to achieve the layout without padding, and on mobile the grid is stacked. See the test page below.
For others, this is the HTML for the two columns:

<div class="parent">
<div class="div1"> first column text </div>
<div class="div2"> second column text </div>
</div>

and this is the css:

@media screen and (max-width: 789px) {
  .parent{
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
   }
}
@media screen and (min-width: 790px) {
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
}

Best regards,
Mike

Hey syberknight-tb,
Unfortunately, we don’t have an element that will achieve this for you in the theme, while there are many plugins that may work for you, when I check some of them they don’t quite match, but if you spend more time testing each one you may find one.
I was able to create something that may work for you using javascript and HTML in a shortcode, on mobile it shows 1 1/2 team member cards with prev & next arrows and loop when you click to the end:

on tablet it shows 2 1/2 cards:

and on desktop it shows 3 1/2 cards:

As is it holds 8 cards, you can add more or have less, you will need to edit the HTML to add your images and text, hopefully you will be able to do this:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, 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 code below and save.

function team_carousel_shortcode() {
    ob_start(); ?>
    
    <div class="carousel-container">
        <button id="prevBtn">←</button>
        <div class="carousel">
            <div class="carousel-track">
                <!-- START: Team Members -->
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 1"><p>Member 1<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 2"><p>Member 2<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 3"><p>Member 3<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 4"><p>Member 4<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 5"><p>Member 5<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 6"><p>Member 6<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 7"><p>Member 7<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 8"><p>Member 8<br>A short bio for the team member</p></div>
        <!-- END: Team Members -->
            </div>
        </div>
        <button id="nextBtn">→</button>
    </div>

    <style>
    .carousel-container {
        position: relative;
        width: 80%;
        overflow: visible;
        margin: auto;
    }

    .carousel {
        overflow: hidden;
        width: 100%;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .card {
        box-sizing: border-box;
        padding: 10px;
        background: #e8e8e8;
        margin: 5px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    @media only screen and (max-width: 767px) { 
        .card { flex: 0 0 62%; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1800px) { 
        .card { flex: 0 0 38%; }
    }

    @media only screen and (min-width: 1801px) { 
        .card { flex: 0 0 28%; }
    }

    .card p {
        color: #000;
     }
	.card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 100%;
    }

    #nextBtn, #prevBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #000;
        border: 2px solid #000;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

    #prevBtn { left: -50px; }
    #nextBtn { right: -50px; }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const track = document.querySelector('.carousel-track');
        const cards = document.querySelectorAll('.card');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        let currentIndex = 0;
        let cardWidth = cards[0].offsetWidth + 20;

        function updateCarousel() {
            const shift = currentIndex * cardWidth;
            track.style.transform = translateX(-${shift}px);
        }

        function moveToNext() {
            currentIndex++;
            if (currentIndex >= cards.length) {
                currentIndex = 0;
            }
            updateCarousel();
        }

        function moveToPrev() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = cards.length - 1;
            }
            updateCarousel();
        }

        nextBtn.addEventListener('click', moveToNext);
        prevBtn.addEventListener('click', moveToPrev);

        window.addEventListener('resize', () => {
            cardWidth = cards[0].offsetWidth + 20;
            updateCarousel();
        });
    });
    </script>

    <?php
    return do_shortcode(ob_get_clean());
}
add_shortcode('team_carousel', 'team_carousel_shortcode');

Then add this shortcode in a code block element on your page: [team_carousel]
Feel free to adjust the colors in the css in the code.

Best regards,
Mike

Hi,
Go to each setting then enable it and choose “select page” so none will be selected. See this post.

Best regards,
Mike

Hi,

Thanks for the update. I’ve imported the top level pages for you, please let us know if you should need anything else. Note that images are not included, but I’m guessing that you will replace them with your own anyway? If not, then you can download them from the demo pages by right clicking on the image and select to save them on your local machine.

Best regards,
Rikard

Hey extraeyes,
The old version 5.6.6 will not automatically update, to update your version of Enfold you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.

For your other issue see this post.

Best regards,
Mike

Hey Shari,

Thank you for the inquiry.

The arrows are there but they are barely visible because the background is transparent due to this css code.

#top .avia-slideshow-arrows.avia-slideshow-controls a {
    background: #fff0 !important;
}

You can either remove the modification or add this code in the Enfold > General Styling > Quick CSS field.

#top .avia-slideshow-arrows.avia-slideshow-controls a {
    background: #a6a6a6 !important;
}

Best regards,
Ismael

Hi,

Great, I’m glad that you found a solution. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

If you have questions outside the current topic, then please open a new thread.

Best regards,
Rikard

Hey Elisa,

I don’t think that updating gradually would make any difference to be honest, I would suggest that you update to the latest version directly. The update to 7.1 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/theme-registration/

Best regards,
Rikard

Hi,
Try this instead:

@media only screen and (max-width: 767px) {
    .responsive #top.page-id-254 #wrap_all .slide-entry {
        width: 100%;
        margin-left: 0%;
        padding-bottom: 20px;
    }
}

Best regards,
Mike

Hi,
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 limedrop,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
    .responsive #top.page-id-254 #wrap_all .slide-entry {
        width: 100%;
        margin-left: 0%;
    }
}

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

Hey extraeyes,
To make this font-size 20px

this css works:

#top #wrap_all .all_colors h2.woocommerce-loop-product__title {
	font-size: 20px;
}

but it will not remove the H2, which it sounds like this is what you want to do.
If you want this H2 to be a “p” instead, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function change_woocommerce_product_title_tag_in_product_slider() { ?>
  <script>
(function($) {
  $(function() {
    function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    replaceElementTag('h2.woocommerce-loop-product__title', '<p></p>');
  });
}(jQuery)); 
</script>
  <?php
}
add_action( 'wp_footer','change_woocommerce_product_title_tag_in_product_slider', 99 );

Best regards,
Mike

Hey Sven,
The fixed header on mobile devices has never been an option because the Dev Team has always felt that it takes too much space on mobile devices, over the years the only option was to add some custom css to achieve this.
To have a fixed header on your site and have a small header so it doesn’t take up as much space you can try this css, I specifically created it for your site and it works in my tests.

@media only screen and (max-width: 989px) {
    .responsive #top #wrap_all #header_main .container.av-logo-container {
        height: 40px !important;
        line-height: 40px;
    }
    #header_meta .container {
    		min-height: 12px;
		}
		#header_meta .phone-info {
    		line-height: 12px;
    		padding: 0;
		}
		#header_meta {
    		min-height: 12px;
		}
		#header_main {
			height: 40px;
			line-height: 40px;
		}
		.responsive #top #header_main>.container .main_menu .av-main-nav>li>a,
		.responsive #top #wrap_all .main_menu {
        height: 40px;
        line-height: 40px;
    }
    .responsive .logo img, .responsive .logo svg {
        max-height: 40px;
        padding: 0;
    }
    .responsive #top .logo,
    .responsive #top .logo a {
    		height: 40px !important;
    }
    .avia-section-huge .content, .avia-section-huge .sidebar {
    		padding-top: 50px;
    		padding-bottom: 50px;
		}
		.responsive.html_mobile_menu_tablet #top #header_main>.container .main_menu .av-main-nav>li>a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
        height: 40px;
        line-height: 40px;
    }
    .responsive #top #wrap_all #header {
    position: fixed !important;
  	}
  	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
        padding-top: 60px !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.
If you have any trouble disable your WP Rocket plugin and the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files. then check again.
Feel free to adjust to suit.
I also notice that your revolution slider doesn’t show on page load, only after the page is scrolled or clicked, this is due to your WP Rocket plugin lazy load, you should add an exclusion for the slider or disable the WP Rocket lazy load option.

Best regards,
Mike