Hi,

Thanks for the login details. The page in question looks fine on my end on both desktop and mobile, could you post screenshots highlighting the problems you are seeing please?

Best regards,
Rikard

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

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
}
}

Best regards,
Mike

Hi,
Thank you for the link to your site, on the page that you have linked to the widths of the text in the cells now look good, so I guess the cell padding tip above helped.
I see that you have two cells hidden on mobile, both are image backgrounds, if you want them to show you can change this:

you have one column with a background image that has no content and no min height so it will not show:

please add a min-height for it to show:

When I check the slider text is white on desktop & mobile, I check with Windows in Chrome, Firefox, & Edge Dev Tools and Android phone. If you see black text on your phone try clearing your browser cache following these steps for Safari and note step 4 where you will Clear the History.
Those are the only issues that I see, please check.

Best regards,
Mike

Hi,
Thank you for the link to your site and your patience, for your first slide with the button, it has a link so adding the button creates a nesting link, which typically wil cause issues, but it looks like this css will help:

#main .aviaccordion-excerpt p > a {
    text-decoration: none;
}

#main .main_color a.my-accordion-button {
	  text-decoration: none;
    background: blue;
    padding: 10px;
    border-radius: 2px;
    color: #FFF;
    position: relative;
    top: 135px;
}
#main .aviaccordion-slide-link .aviaccordion-title {
    top: -50px;
    position: relative;
}
#main .aviaccordion-slide-link {
    text-decoration: none;
}

this is the expected results:

Best regards,
Mike

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

#top .avia_cart_buttons {
    opacity: 1;
}
#top div.avia_cart_buttons a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover,
#top div.avia_cart_buttons a.button.show_details_button:hover {
    color: black !important;
}

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

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:

then add the this code and save.

add_filter('avf_logo','av_change_logo');
function av_change_logo($logo)
{
    if(wp_is_mobile() ) {
    $logo = "/wp-content/uploads/2024/04/LogoMobile.png";
    }
    return $logo;
}

you may need to make the image url in the code your full path if this doesn’t work, I didn’t want to post your full url as I think you want it private.

Best regards,
Mike

Hey Petra,
Thanks for the link to your page, I see that you are using some grid rows and the cells have a Cell Padding of 150px like this:

Try using the icon for mobile devices and change the Cell Padding to zero, like this:

For each icon is a different setting for different device sizes, you may want to use zero for the three smallest sizes or at least much less than what you use for desktop.
See if this helps, and if you want to include a admin login in the Private Content area so we can help more, just use any fake email address and post the user & pass in the Private Content area below.

Best regards,
Mike

Hey woogie07,
It is the padding for the portfolio grid, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .avia-fullwidth-portfolio .sort_width_container {
    padding: 0;
}

Best regards,
Mike

Hey marco593,
Thank you for your patience, the following javascript will add the chart title to the center of the Doughnut Chart,

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:

then add this code and save.

function doughnut_chart_with_title_in_center() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    function waitForChartJs() {
        if (typeof Chart === 'undefined') {
            setTimeout(waitForChartJs, 50);
        } else {
            registerCenterTitlePlugin();
        }
    }

    function registerCenterTitlePlugin() {
        Chart.register({
            id: 'centerTitle',
            beforeInit: function(chart) {
                // Dynamically hide the title and legend
                const options = chart.options;
                if (options.plugins) {
                    if (!options.plugins.title) {
                        options.plugins.title = {};
                    }
                    options.plugins.title.display = false; // Hide title

                    if (!options.plugins.legend) {
                        options.plugins.legend = {};
                    }
                    options.plugins.legend.display = false; // Hide legend
                }
            },
            afterDraw: function(chart) {
                if (chart.config.type === 'doughnut') {
                    const ctx = chart.ctx;
                    const width = chart.width;
                    const height = chart.height;
                    const fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";
                    ctx.textAlign = "center";

                    // Use existing title if set, otherwise use a default text
                    const text = chart.options.plugins.title.text || 'Your Title Here';
                    const textX = width / 2;
                    const textY = height / 2;

                    ctx.fillText(text, textX, textY);
                }
            }
        });
    }

    waitForChartJs();
});
</script>
  <?php
}
add_action( 'wp_footer', 'doughnut_chart_with_title_in_center', 99 );

This is the result:

Best regards,
Mike

Hi,

Great, I’m glad that you got things working and thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update.

A quick fix is to manually define the position of the calendar, but this may need to be adjusted for different screen sizes using css media queries.

.flatpickr-calendar.animate.arrowTop.arrowLeft.rightMost.open {
    right: auto !important;
    left: 660px !important;
}

Best regards,
Ismael

Hi,

Add this css code to adjust the layout of the tag pages:

#top.tag .no_margin.av_one_third {
  float: none;
  margin-right: 2%;
  width: 31%;
  margin-bottom: 2%;
}

#top.tag .grid-sort-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#top.tag .grid-entry-title.entry-title {
  font-size: 1.2em;
  padding: 10px 13px;
}

Then add this code in the functions.php file to adjust the image thumbnail:

add_filter("avf_post_slider_args", function($atts, $context) {
  if( $context == "tag" ) {
    $atts['type']  = 'grid'; 
    $atts['preview_mode'] = 'custom';
    $atts['image_size'] = 'full';
  }
  return $atts;
}, 10, 2);

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Looks like the issue also happens on desktop view. It might be due the following script error which is generated from the compressed (autoptimize_single) script.

Uncaught TypeError: $.avia_utilities.supports is not a function
    at avia_hover_effect (autoptimize_single_aec3c90c3ca8780bf5fccbd8621958ec.js:105:42)
    at $.avia_utilities.avia_ajax_call (autoptimize_single_aec3c90c3ca8780bf5fccbd8621958ec.js:33:29)
    at HTMLDocument.<anonymous> (autoptimize_single_aec3c90c3ca8780bf5fccbd8621958ec.js:11:44)
    at e (jquery.min.js:2:27028)
    at t (jquery.min.js:2:27330)

Please try to deactivate the Autoptimize plugin temporarily and let us know of the result.

Best regards,
Ismael

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

.html_elegant-blog #top .post-entry .blog-categories {
    display: inline;
    margin-left: 10px;
}

.html_elegant-blog #top .slide-content .slide-meta {
    display: inline;
}

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

Best regards,
Mike