Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
#top .fullsize .template-blog .post .entry-content-wrapper {
  text-align: left;
}
}

Best regards,
Rikard

Hi,

The other sorting items are displayed because some portfolio items belong to multiple categories. For example, the item Harrisonburg Innovation Hub is assigned to “Commercial and Retail”, which is a selected category, but it also belongs to three additional categories, Anthony Barone’s Projects, Ben Reid’s Projects, and Kevin Gabel’s Projects.

Please note that all categories associated with the items will display as sorting options. The “Which Entries Should Be Used” option only controls which items are shown in the masonry element, but it does not control or limit the sorting/filter categories.

If you need to hide the other categories and only display the selected ones, try adding this css code:

#top .av-sort-by-term a, #top .av-sort-by-term .text-sep {
    display: none;
}

#top .av-sort-by-term .commercial-retail_sort_button, #top .av-sort-by-term .education_sort_button, #top .av-sort-by-term .healthcare_sort_button, #top .av-sort-by-term .industrial_sort_button, #top .av-sort-by-term .municipal-civic_sort_button, #top .av-sort-by-term .religious_sort_button {
    display: inline-block;
}

Best regards,
Ismael

Hey Alan,

Thank you for the inquiry.

There is no option for this in the Color section by default, but you can add a custom class name (e.g., av-section-border-radius) to the element under Advanced > Developer Settings > Custom CSS Class field, then add the following css to apply the border radius.

#top #wrap_all .av-section-border-radius {
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
}

Another option is the Layout > SVG Divider settings.

View post on imgur.com

Best regards,
Ismael

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