Hi,

If you need the buttons and post meta info (date, comments) to align, you can either apply a minimum height to the post title and excerpt, or make sure they have the same number of characters, which is probably not ideal. To do the former, you can add the following css code:

#top .avia-content-slider .slide-entry-title {
    min-height: 118px;
}

In the end, the position of the “read more” button will depend on the length of the title and post excerpt.

Best regards,
Ismael

Hi,

If you want the left image to be taller or larger on smaller screen sizes, try adding another image element with a taller aspect ratio. The current image is a bit square and gets squeezed disproportionately in height compared to the right widget because it’s inside a smaller column (1/4 width). After adding the other image, you can toggle the visibility of both images on different screen sizes using Advanced > Responsive > Element Visibility options.

You can also add this css code to adjust the width of the column containing the image.

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

  /* Add your Mobile Styles here */
  #top .flex_column.av-acgfsc-cb6752318e4619c3295e6429d893dcfc {
    width: 50%;
    margin-left: 0;
  }
}

After adding the css:

View post on imgur.com

Best regards,
Ismael

Hey smithyoung,

The update to 7.1.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

Hey Jackie,

You can edit the excerpt in the Exerpt field. If you can’t see it, then select to show it under Screen Options in the top right hand corner of the screen while editing a post.

Best regards,
Rikard

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