Hey a10plus,

It’s likely due to the CSS you have added in Quick CSS:

.faq-title h4 {
  margin: 0px !important;
  font-size: 16px !important;
  line-height: 22px !important;
  padding: 0 !important;
  color: #000000;
  font-weight: normal;

h1{
text-transform: none !important;
}

You need a closing curly bracket after the first block.

Best regards,
Rikard

Hey Angelo,

Thank you for the inquiry.

Try to add this code to the functions.php file to insert a go back button inside the header container.

add_action( 'ava_main_header', 'ava_main_header_mod' );
function ava_main_header_mod() {
    ?>
    <div class="ava-go-back-wrapper">
        <a href="javascript:history.back();" class="ava-go-back-button">Go Back</a>
    </div>

    <style>
        .ava-go-back-wrapper {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        .ava-go-back-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .ava-go-back-wrapper {
                display: flex;
            }
        }
    </style>

    <script>
        function closeBurgerMenu() {
            const burgerBtn = document.querySelector('.av-burger-menu-main .av-hamburger.av-js-hamburger');
            const overlay = document.querySelector('.av-burger-overlay');
            if (burgerBtn && burgerBtn.classList.contains('is-active')) {
                burgerBtn.classList.remove('is-active');
            }
            if (overlay) {
                overlay.style.display = 'none';
                overlay.style.opacity = '0';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            closeBurgerMenu();

            const goBackBtn = document.querySelector('.ava-go-back-button');
            if (goBackBtn) {
                goBackBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    closeBurgerMenu();
                    setTimeout(function() {
                        history.back();
                    }, 50);
                });
            }
        });

        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                closeBurgerMenu();
            }
        });
    </script>
    <?php
}

Best regards,
Ismael

Hi,

Sorry for the delay. Since removing the br tags also removes the list items, we used this css in the style.css file to hide the line breaks and display the list as a standard bullet list.

.av-masonry-entry-content ul br {
    display: none;
}

.av-masonry-entry-content ul li {
    padding-left: 10px;
	position: relative;
}

.av-masonry-entry-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1em;
    line-height: 1;
}

Please check the private field for the screenshot.

Best regards,
Ismael

Hi,

Thank you for the link.

Did you add this css code?

#top .fullsize .template-blog .post-title {
    text-align: left;
    font-size: 48px;
}

Try to override the font size with this code:

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

  /* Add your Mobile Styles here */
  #top .fullsize .template-blog .post-title {
    font-size: 16px;
  }
}

Best regards,
Ismael

Hey condonp,

Thank you for the inquiry.

This is possible but it will require some custom html and some css modifications. You can start with the following code:

<div class="av-custom-testimonial">
  <div class="av-testimonial-card">
    
    <div class="av-testimonial-left">
      <h3 class="av-testimonial-heading">What our clients say</h3>
      <div class="av-testimonial-stars"></div>
      <p class="av-testimonial-text">“Your testimonial text goes here.”</p>
      <div class="av-testimonial-client">Client Name</div>
      <div class="av-testimonial-client-meta">Client Title</div>
    </div>

    <div class="av-testimonial-right">
      <div class="av-image-wrap">
        <img src="image.jpg" alt="">
      </div>
    </div>
  </div>
</div>

Then add this code in the Quick CSS field:

.av-custom-testimonial .av-testimonial-card {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  max-width: 880px;
  align-items: stretch;
}

.av-custom-testimonial .av-testimonial-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
}

.av-custom-testimonial .av-testimonial-heading {
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  display: inline-block;
  width: 50%;
}

.av-custom-testimonial .av-testimonial-stars {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.av-custom-testimonial .av-testimonial-text {
  font-size: 0.98rem;
  color: #6b7280;
  margin-bottom: 14px;
}

.av-custom-testimonial .av-testimonial-client {
  font-weight: 600;
  font-size: 0.95rem;
  color: #08121a;
}

.av-custom-testimonial .av-testimonial-client-meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 4px;
}

.av-custom-testimonial .av-testimonial-right {
  position: relative;
  min-height: 220px;
  overflow: visible;
}

.av-custom-testimonial .av-image-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 160px;
  height: 280px;
  overflow: hidden;
  border-top-left-radius: 140px 72px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  background: #f3f4f6;
}

.av-custom-testimonial .av-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 760px) {
  .av-custom-testimonial .av-testimonial-card {
    grid-template-columns: 1fr;
  }

  .av-custom-testimonial .av-image-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    border-top-left-radius: 48px 26px;
  }

  .av-custom-testimonial .av-testimonial-right {
    min-height: auto;
  }

  .av-custom-testimonial .av-testimonial-heading {
    width: 70%;
  }
}

Best regards,
Ismael

Hey ti2media,
Try adding this snippet to your child theme functions.php:

function add_sticky_info_box() {
    ?>
    <style>
        .sticky-info-box {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }
        
        .sticky-info-box.hidden {
            display: none;
        }
        
        .sticky-info-box-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .sticky-info-box-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
            flex: 1;
        }
        
        .sticky-info-box-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
        }
        
        .sticky-info-box-close:hover {
            color: #333;
        }
        
        .sticky-info-box-message {
            flex: 1;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            overflow-y: auto;
        }
        
        .sticky-info-box-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-box-button:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle {
            position: fixed;
            bottom: 120px;
            right: 50px;
            width: 50px;
            height: 50px;
            background: #0073aa;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-toggle:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle.visible {
            display: flex;
        }
    </style>
    
    <div class="sticky-info-box" id="stickyInfoBox">
        <div class="sticky-info-box-header">
            <h3 class="sticky-info-box-title">Important Information</h3>
            <button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button>
        </div>
        <div class="sticky-info-box-message">
            <p>This is your information box! You can customize this message to display any content you'd like to share with your visitors.</p>
        </div>
        <a href="/your-page-url" class="sticky-info-box-button">Learn More</a>
    </div>
    
    <button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>
    
    <script>
        (function() {
            var infoBox = document.getElementById('stickyInfoBox');
            var closeBtn = document.getElementById('closeInfoBox');
            var toggleBtn = document.getElementById('infoToggle');
            
            // Close the info box
            closeBtn.addEventListener('click', function() {
                infoBox.classList.add('hidden');
                toggleBtn.classList.add('visible');
            });
            
            // Show the info box again
            toggleBtn.addEventListener('click', function() {
                infoBox.classList.remove('hidden');
                toggleBtn.classList.remove('visible');
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_info_box');

Then adjust the title, message, buttone text & link to suit. You can also adjust the CSS to change colors, etc.
It places the box & info button 120px from the bottom so they are above the scroll-top button, ratio than have them move if the scroll-top shows, which would not be so good.

Best regards,
Mike

Hi,

Thank you for the update.

If you want to create it manually using html, try to add this code in a text or code block element:

<div class="av-logo-row">
<div class="av-logo-item">
    <img src="logo1.png" alt="Logo 1">
    <span>Text 1</span></div>
<div class="av-logo-item">
    <img src="logo2.png" alt="Logo 2">
    <span>Text 2</span></div>
<div class="av-logo-item">
    <img src="logo3.png" alt="Logo 3">
    <span>Text 3</span></div>
<div class="av-logo-item">
    <img src="logo4.png" alt="Logo 4">
    <span>Text 4</span></div>
<div class="av-logo-item">
    <img src="logo5.png" alt="Logo 5">
    <span>Text 5</span></div>
<div class="av-logo-item">
    <img src="logo6.png" alt="Logo 6">
    <span>Text 6</span></div>
<div class="av-logo-item">
    <img src="logo7.png" alt="Logo 7">
    <span>Text 7</span></div>
<div class="av-logo-item">
    <img src="logo8.png" alt="Logo 8">
    <span>Text 8</span></div>
<div class="av-logo-item">
    <img src="logo9.png" alt="Logo 9">
    <span>Text 9</span></div>
</div>

Then use this css:

.av-logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.av-logo-item {
  flex: 1 1 calc(100% / 9 - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.av-logo-item img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.av-logo-item span {
  font-size: 14px;
  color: #333;
}

@media (max-width: 1024px) {
  .av-logo-item {
    flex: 1 1 calc(33.333% - 20px);
  }
}

@media (max-width: 600px) {
  .av-logo-item {
    flex: 1 1 100%;
  }
}

Best regards,
Ismael

Hi,

@Eleina_Shinn: Try to use this html in the phone number field:

<div style="display:flex;align-items:center;gap:20px;">
<div style="display:flex;align-items:center;gap:6px;">[av_font_icon icon='phone' font='svg_entypo-fontello' size='13px' position='left' av_uid='av-mifjh9cz' sc_version='1.0'][/av_font_icon] 941-462-9082</div>
<div style="display:flex;align-items:center;gap:6px;">[av_font_icon icon='ue805' font='entypo-fontello' size='13px' position='left' av_uid='av-emailicon' sc_version='1.0'][/av_font_icon]  (Email address hidden if logged out) </div>
</div>

Please don’t hesitate to open another thread if you need additional assistance.

Best regards,
Ismael

Hi,

Thank you for the info.

The site is broken because there is an invalid css rule in the Quick CSS field — a closing curly brace is missing.

/* -- Change font size in Main Menu Bar -- */
#header_main .avia-menu-text {
    font-size: 17px;

We corrected the css code and set the Maximum Container Width to 1310px. The site should be displaying correctly now.

Best regards,
Ismael

Hi,

The font size of the heading elements for different screen sizes can also be adjusted in Enfold > General Styling > Typography as shown in the screenshot below.

Best regards,
Ismael

Hi,

Thank you for the update.

If you want to revert to using the default icon, please remove the previous modifications, then add this css code to enlarge the instagram icon and adjust the color:

#top #wrap_all .social_bookmarks .social_bookmarks_instagram a {
    background: linear-gradient(44deg, #ef1a88, #e6683c, #fa991f, #ee166c, #bc1888);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 50px !important;
    width: 100%;
    height: 100%;
    line-height: 80px;
}

.responsive #top #header .main_menu .social_bookmarks {
    margin-top: -40px !important;
    overflow: visible;
}

Best regards,
Ismael

Hey Tanja,

You can change the font size directly in the editor. The toolbar is located just above the content.

Best regards,
Rikard