Hey MiaShia,

Thank you for the inquiry.

We encountered an error when we tried to access the site. The password for the specified username is incorrect.

Fehler: Das eingegebene Passwort für die E-Mail-Adresse REDACTED@gmail.com ist nicht korrekt. Passwort vergessen?

Please check the info provided or post an alternative account. In the meantime, please provide a screenshot of the element that you’d like to adjust.

If you want to adjust the font size of the portfolio gird title, please use this css code.

#top #wrap_all .all_colors h3.grid-entry-title {
    font-size: 30px;
    font-weight: normal;
}

Or edit the h3 element in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hi,
Glad to hear that you find this helpful, thanks to Guenni007 for pointing out that the needed css may not always be loaded correctly, so I added the css into the shortcode and I changed the date attribute to include a time so you can better choose a start date & time. I also added a format attribute so you can choose what will show, like the “Smallest time unit” and “Largest time unit”
So the shortcode to use on the page is now like this: [custom_countup date=”2024-03-01 00:00:00″ format=”weeks,days,hours,minutes,seconds” color=”#000″ background=”#f8f8f8″] you can remove the time units that you don’t want to show.

But please note that if you only show hours & days, the day element will only show up to 7 days even if you have the week element hidden, so you will not see “13” days, the same is for the calculation on all of the elements. This is the new code:

function wp_custom_countup_shortcode($atts) {
    $a = shortcode_atts(array(
        'date' => '2020-01-01 00:00:00',
        'color' => 'black',
        'background' => 'white',
        'format' => 'weeks,days,hours,minutes,seconds', 
    ), $atts);

    $uid = uniqid('countup_');
    wp_enqueue_script('jquery');

    $formatParts = array_map('trim', explode(',', $a['format']));
    $htmlParts = array();

    foreach ($formatParts as $part) {
        if (in_array($part, ['weeks', 'days', 'hours', 'minutes', 'seconds'])) {
            $htmlParts[] = "<span class='av-countdown-cell av-align-center' style='color: {$a['color']};'><span class='av-countdown-cell-inner' style='background-color: {$a['background']};'><span class='av-countdown-time {$part}'></span><span class='av-countdown-time-label'>" . ucfirst($part) . "</span></span></span>";
        }
    }

    $html = "<div id='{$uid}' class='av-countdown-timer-inner'>" . implode("\n", $htmlParts) . "</div>";

    $serverTimeAtPageLoad = current_time('timestamp', true) * 1000;

    $jsParts = [];
    foreach ($formatParts as $part) {
        $jsParts[] = "'{$part}': Math.floor(" . ($part == 'weeks' ? "distance / (1000 * 60 * 60 * 24 * 7)" : ($part == 'days' ? "(distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24)" : ($part == 'hours' ? "(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)" : ($part == 'minutes' ? "(distance % (1000 * 60 * 60)) / (1000 * 60)" : "(distance % (1000 * 60)) / 1000")))) . ")";
    }

    $html .= "<script>
                jQuery(function($) {
    var countUpDate = new Date('{$a['date']}').getTime();
    var serverTimeAtPageLoad = {$serverTimeAtPageLoad};
    var x = setInterval(function() {
        var now = new Date().getTime();
        var elapsedTime = now - serverTimeAtPageLoad;
        var serverNow = serverTimeAtPageLoad + elapsedTime;
        var distance = serverNow - countUpDate;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        var weeks = Math.floor(days / 7);
        days -= weeks * 7; 

        var timeParts = {
            'weeks': weeks,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };

        Object.keys(timeParts).forEach(function(key) {
            $('#{$uid} .' + key).text(timeParts[key]);
        });
    }, 1000);
});
</script>";

    $html .= "<style>
    .av-countdown-timer-inner { display: table; width: 100%; table-layout: fixed; }
    .av-countdown-cell { display: table-cell; }
    body .av-align-center { text-align: center; }
    .av-countdown-cell-inner { display: block; vertical-align: baseline; border-style: solid; border-width: 1px; margin: 2px; padding: 20px; }
    .av-countdown-time { display: block; font-size: 40px; line-height: 1em; font-weight: 100; text-decoration: none; }
    .av-countdown-time-label { display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; line-height: 1.65em; }
    @media only screen and (max-width: 767px) {
        .responsive .av-countdown-cell-inner { padding: 12px 7px; }
        .responsive .av-countdown-time { font-size: 30px; }
        .av-countdown-time-label { text-transform: none; }
    }
    @media only screen and (max-width: 989px) {
        .responsive .av-countdown-cell-inner { padding: 10px 10px; }
    }
    </style>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

You can add this css code to adjust the width of the color section container on mobile view.

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

  /* Add your Mobile Styles here */
  #section-container-width .container {
    width: 80% !important;
    min-width: 80% !important;
  }
}

You may need to adjust the styles of the following elements on mobile view. Instead of adding the styles inline, assign a unique class name to the < span > tag and define the css rules separately. This should allow you to adjust the style of the element for different screen sizes.

<span style="color: #ffffff; font-size: 34px; font-weight: 600; padding-left: 20%;">Online translation services</span>

Best regards,
Ismael

Hey joschro,

Thank you for the inquiry.

Have you tried adjusting the color values in the Enfold > General Styling > Main Content tab? To adjust the default font size of the body text, go to the General Styling > Typography tab, then adjust the values of the Default Content Font Size.

Best regards,
Ismael

Hi,
Thanks for the login, I found that you had the font size set to 13px:

since the demo uses 16px, I changed it for you, please clear your browser cache and check and if you want it larger please adjust.

Best regards,
Mike

Hey Eduardo,

Thank you for the inquiry.

1.) You can edit the Accordion element and adjust the colors in the Styling > Colors toggle.

2.) To adjust the style of the toggler, you adjust can the values in this css rule:

.js_active .toggler, .avia-admin-preview-container .toggler {
    padding: 9px 3px 9px 35px;
    line-height: 1.65em;
}

3.) You can also adjust the font styles in the Styling > Font Sizes toggle.

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the left or right icon, you can use this css rule:

#top .iconbox_left_content .iconbox_icon, #top .iconbox_right_content .iconbox_icon {
    width: 74px;
    height: 74px;
    font-size: 80px;
    line-height: 72px;
    border-style: solid;
    border-width: 1px;
    border-radius: 500px;
    text-align: center;
    margin-right: 22px;
}

You may need to remove the previous css code.

.iconbox_icon[data-av_icon]:before {
    font-size: 50px!important;
}

Best regards,
Ismael

Hey khrntanya,

Thank you for the inquiry.

The following css code overrides your modification:

.iconbox_icon[data-av_icon]:before {
    font-size: 50px!important;
}

You might have added it in the Quick CSS field.

Best regards,
Ismael

Hi,

I set them all to 13px.

The current font size is already set to 13px. Have you tried using a larger value? Please provide the login details in the private field so that we can check the settings properly.

Best regards,
Ismael

Hey omnicnc,

Thank you for the inquiry.

The default font size is currently set to 13px. Have you tried to temporarily disable the Enfold > Performance > File Compression settings? If this doesn’t work, try to manually adjust the font size in the Enfold > General Styling > Typography panel.

Best regards,
Ismael

Hey LoPld,
For your first question, I believe what you want is to have the burger menu show until 1240px, if this is correct then your css is wrong. Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 768px) and (max-width: 1240px){
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block!important;
}
#top #header .av-main-nav > li.menu-item  {
  display: none!important;
}
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block;
}
#top #header .av-main-nav > li#menu-item-search.menu-item  {
  display: block!important;
}
.av-main-nav-wrap {
    float: right;
}
}
@media only screen and (min-width: 990px) and (max-width: 1240px){
#top #header .av-main-nav > li#menu-item-search.menu-item  {
  display: block!important;
  line-height: 118px;
}
#top #header .av-main-nav > li#menu-item-search.menu-item a {
    line-height: 118px;
}
.responsive.html_mobile_menu_tablet #top #wrap_all .menu-item-search-dropdown > a {
    font-size: 24px;
    color: #e8c100;
}
}

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 Munford,
Your css for 2em on mobile is working when I check, except for the first one that has it’s own css:

#top .heliko .av-image-caption-overlay-center {
    font-size: 4em !important;
}

Try changing the hotspot animation in the element settings:

Best regards,
Mike

Hey iago26,

1. You can set the transparent logo under Enfold->Theme options->Transparency Logo Options.
2. I’m not sure what you are looking to achieve, but you could try to add your code in a Code Block element.
3. You can set font sizes under Enfold->General Styling->Typography, or under Enfold->Advanced Styling.

Best regards,
Rikard

Hi,

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

#av-burger-menu-ul li a {
  font-size: 18px;
  color: red !important;
}

Best regards,
Rikard

Hi,

Thank you for the inquiry.

Have you tried adjusting the font size or typography settings in the Enfold > General Styling > Typography tab? You should be able to adjust the style of the heading elements (h1, h2 etc) for different screen sizes including mobile screens.

Best regards,
Ismael

Hi,

Thank you for the update.

We’ve checked the modifications in the Quick CSS field and noticed that one of your css media queries is missing a closing tag or curly brace, which renders the rest of the css rules invalid.

/* MASONRY GALLERY FONT SIZE AND COLOR */
@media only screen and (min-width: 768px) {

We didn’t try to adjust it because we are not sure which modifications are meant for desktop and which are intended for other screen sizes. Also, please make sure to remove duplicate css media queries such as

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

You only require one instance of this per stylesheet.

Best regards,
Ismael

Hi,
When I check the red boxes on mobile they are the correct size based on the text font size, Please see the first screenshot in the Private Content area.
If this is what you see than we can help adjust with css or you can follow your plan above that works for many people.
But I want to ensure that you are not testing the mobile view on a desktop screen by making the screen smaller, if you test this way please ensure to reload the page, Please see the second screenshot in the Private Content area.
If this is what you see then it is a testing error that real devices will not see, please let us know.

Best regards,
Mike