Page 4 – Support | Kriesi.at – Premium WordPress Themes

Hi,
In your form you have the labels hidden with the Hide Form Labels option in the style tab, thus the fields use a placeholder to label the fields:

the placeholder option for the multi select section is to add “disabled” so the option is not selectable as in my solution above:

this keeps the form consist with no labels above the fields.
In your shortcode you have added a text field to act as a label above the multi select section:

I didn’t realize that you wanted a label above this only section, so I recommend removing your text section and adding the text to the Form Element Label:

and adding this css:

.avia_ajax_form.av-form-labels-hidden label[for="avia_3_1"] {
	position: unset;
}
.avia_ajax_form.av-form-labels-hidden #avia_3_1 option:first-child {
	display:none;
}

which will show the label for this one field:

I added a link to a new test page below, this is the updated shortcode from your last post:

[av_contact title='' button='Senden' on_send='' sent='Ihre Nachricht wurde versendet!' link='manually,http://' captcha='active' captcha_theme='light' captcha_size='normal' captcha_score='0.5' email='info@.......de' from_email='' subject='' autoresponder_email='info@......de' autoresponder_reply_to='' autoresponder_subject='' autorespond='' autorespond_after='' hide_labels='aviaTBhide_labels' form_align='' color='' heading_tag='' heading_class='' alb_description='' id='' custom_class='kursformular' template_class='' aria_label='' av_uid='av-l59y6d3l-6' sc_version='1.0' admin_preview_bg='']
[av_contact_field label='Name' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-19lvsfd-5' sc_version='1.0'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' check='is_email' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-35sn6x-4' sc_version='1.0'][/av_contact_field]
[av_contact_field type='select' label='Für welchen Kurs möchten Sie anfragen?' options='Ohne Geige geht es nicht,Streichen lernen / 22.10.2022' multi_select='aviaTBaviaTBmulti_select' check='' element_display='' width='' headline_tag='h3' av_uid='av-l5e3okhn-3' sc_version='1.0'][/av_contact_field]
[av_contact_field type='text' label='Anzahl der Personen?' options='' check='is_number' element_display='' width='' headline_tag='h3' av_uid='av-l59y48df-2' sc_version='1.0' multi_select='' av_contact_preselect=''][/av_contact_field]
[av_contact_field type='textarea' label='Anmerkung' options='' check='' element_display='' width='' headline_tag='h3' av_uid='av-l59y4xcu-1' sc_version='1.0' multi_select='' av_contact_preselect=''][/av_contact_field]
[/av_contact]

As for your question about the text: “Bitte löse die Gleichung. Diese Maßnahme dient der Abwehr von Spam” (my English translation is: Please solve the equation. This measure serves to protect against spam)
I only see the text: Please prove that you are human by solving the equation *
I’m not sure if it is the same text and your is German, or if your text is added somewhere else, but when the Hide Form Labels option in the style tab is used no text is shown:

if labels are shown it is like this:

if you are seeing something different the check your customizations or Enfold Theme Options ▸ Privacy and Cookies ▸ Append a privacy policy message to template builder contact forms?

Best regards,
Mike

August 23, 2022 at 12:27 am #1362435

In reply to: Masonry Gallery Backgruond

Hi,
Thanks for the feedback, and the example to /portfolios/gallery/ the space you are seeing from the masonry gallery below the header is because the color section is vertically centering the element, please note in this screenshot the green space is padding, but the masonry element is centered:

So while on a low content page this would be desired, centering the content, if you would rather have the extra white space below the content please try this css:

#av_section_1.avia-section.av-minimum-height.av-minimum-height-100 .container .content {
    vertical-align: top;
}

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

Please note that typically we would recommend adding a custom class to your color section so this would only affect the certain color sections that you wish, but in this case I believe that I have successfully targeted these low content page color sections in the css rule with the ID #av_section_1 which would only occur on the first section, and with the added class .av-minimum-height-100, which means it must be a color section with a minimum height of 100%
But please test and check your other pages for any conflicts and link to any you find so we can adjust.

Best regards,
Mike

August 10, 2022 at 11:37 am #1361329

In reply to: Theme Problem

Alexander Baum

Guest

Hello Ricard,
I have now deactivated the slider plug-in and switched the hosting back to 8x.x.
An error of the Theme Plug-In is now caused again.

Here is the error message.

Greetings Alexander

>>>>>>>>>>>>>>>>>>>>>>>
Wenn du Hilfe bei diesem Problem suchst, wirst du möglicherweise nach einigen der folgenden Informationen gefragt:
WordPress-Version 6.0.1
Aktives Theme: Enfold (Version 5.1.1.1-image) Aktuelles Plugin: (Version ) PHP-Version 8.0.20

Fehler-Details
==============
Ein Fehler vom Typ E_ERROR wurde in der Zeile 38 der Datei /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/css/dynamic-css.php verursacht. Fehlermeldung: Uncaught Error: Call to undefined function extract() in /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/css/dynamic-css.php:38
Stack trace:
#0 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/includes/admin/register-dynamic-styles.php(234): require()
#1 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/functions.php(781): avia_prepare_dynamic_styles()
#2 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-includes/class-wp-hook.php(307): avia_custom_styles()
#3 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters()
#4 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-includes/plugin.php(476): WP_Hook->do_action()
#5 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-settings.php(598): do_action()
#6 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-config.php(79): require_once(‘…’)
#7 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-load.php(50): require_once(‘…’)
#8 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-login.php(12): require(‘…’)
#9 {main}
thrown

August 8, 2022 at 3:17 am #1361035

In reply to: Image position in mobile view

Ismael

// https://kriesi.at/documentation/enfold/add-custom-css/

Hi,

Thank you for the info.

The css code below should adjust the position of the dots on smaller screens.

@media only screen and (max-width: 768px) {
    .avia-image-container.av-67cea-136ddc8b145abc744c886b5819885f00, .avia-image-container.av-4hwii-ef140ae0612800d65a56956f82b14b3f, .avia-image-container.av-2ofye-558b2f838626b4d4afd94927f17a28e6{
        position: relative;
        top: -75px;
        left: -40px;
    }
}

We are using the unique class name of the image elements in the css rule above, but the class names can be replaced with custom ones if necessary. Please check this documentation.

Best regards,
Ismael`

August 5, 2022 at 3:58 pm #1360820

In reply to: Error Version 5.1.1 – WooCommerce 6.7.0

vbonora

This reply has been marked as private.

August 5, 2022 at 12:24 pm #1360786

Topic: Posts in wrong category

in forum Enfold

evas49

Participant

Hello
when i call “Category Opera” i see posts from “Category Opera” BUT i see also “Impress”, “GDPR-Declaration” and about ten other posts which dont belong to the “Category Opera”.
In fact: “Impress” and “GDPR” are not even posts – they are pages.

I created a page called “Opera”
I added the masonry element
I picked “Show posts from Category”–> “Opera”

[av_masonry_entries link='category,1' wc_prod_visible='' wc_prod_hidden='hide' wc_prod_featured='' prod_order_by='' prod_order='' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' sort='yes' query_orderby='date' query_order='DESC' caption_elements='title excerpt' caption_styling='' caption_display='always' size='fixed masonry' orientation='' image_size='masonry' gap='large' columns='2' av-medium-columns='' av-small-columns='' av-mini-columns='' items='12' paginate='load_more' color='' custom_bg='' overlay_fx='grayscale' animation='active' img_scrset='' lazy_loading='enabled' id='' custom_class='' template_class='' av_uid='av-l6gb8e5x' sc_version='1.0']

This is the content of my functions:

<?php
//$avia_config['imgSize']['square-custom'] = array('width'=>300, 'height'=>300); // small image for blogs
//$avia_config['imgSize']['square2'] = array('width'=>400, 'height'=>400); // small image for blogs
/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/
function enqueue_parent_theme_style() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style');

/* Proper way to enqueue styles and scripts
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

/* Activate Avia debug mode */
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
	return "debug";
}
add_filter( 'widget_text', 'do_shortcode' );

add_filter('avf_title_args', 'fix_single_post_title', 10, 2);
function fix_single_post_title($args,$id)
{
if ( $args['title'] == 'Blog - Aktuelle Neuigkeiten' )
{
$args['title'] = get_the_title($id);
$args['link'] = get_permalink($id);
$args['heading'] = 'h1';
}

return $args;
}

I can solve it by deleting the “wrong pages”, than flushing the permalinks, then adding the pages again (best with a new slug).
But is only possible with a small number of pages

I cant not show you live since i am an Xampp.

Eva Simone

This topic was modified 3 years, 7 months ago by evas49.
This topic was modified 3 years, 6 months ago by Mike.

July 8, 2022 at 1:02 pm #1357688

In reply to: fixed back round image on mobile version

background-attachment: fixed is not supported by most of the mobile devices.
So Enfold turns that to background-attachment to : scroll – and a parallax container is generated.

A position fixed is supported by mobile devices – the trick is to tranform that.

Important: so set the background-attachment on that color-section to scroll please!
give a custom class to that color-section : bg-fixed and put this to your quick css:

.avia-section.bg-fixed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
  overflow: hidden;
  position: relative !important;
}

.avia-section.bg-fixed:before {
  background-image: inherit !important;
  background-repeat: inherit !important;
  background-size: cover;
  background-position: inherit;
  content: "";
  position: fixed !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1 !important;
  will-change: transform;
  pointer-events: none;
}

see f.e: https://webers-testseite.de/goodwave2/
PS: kanst du mal auf deiner Seite : was_mich_2_jahre_haarefaerbens_gelehrt_haben schauen, die Bilder sind eingeladen über:
i0.wp.com – war das deine Dev Seite, die du migriert hast? Jetzt hast du eine Rückbezüge auf diese Seite, das ist mixed Content bewertet – ausserdem ist die http – weshalb die Seite dann auch als nicht sicher eingestuft wird.

June 29, 2022 at 1:26 pm #1356856

In reply to: Multiply image

Hey whdsolutions,
Thank you for your patience, I was albe to achieve this similar to your layerslider which is using an image that has the overlay in the image:

I placed the background image in a color section with the custom class “mix-blend-mode” and added a 1/2 column with a special heading and image element with your logo image:

then I added this css:

#top #main .mix-blend-mode > .container,
#top #main .mix-blend-mode > .container .avia_image {
	mix-blend-mode: multiply;
}

with successfully results:

I linked to my test page below, please give this a try.

Best regards,
Mike

June 23, 2022 at 1:38 pm #1356293

In reply to: Gallery single Image styling

put it in General Styling – Quick CSS
maybe an important is necessary :

#top .image-overlay .image-overlay-inside::before {
  content: "\e80f" !important;
  font-size: 50px;
  color: #fff !important;
}

#top div .avia-gallery .avia-gallery-big {
  padding: 0px !important;
  border-style: none !important;
}

#top div .avia-gallery img {
  border-style: none !important;
  padding: 0px !important; 
}

the : content: "\e80f" is a little camera – if you like to show a real image – code has to be adjusted.
if you like to have it specific only for one gallery – give a custom-class to that gallery – and this has to be part of the css code.

PS: i do not see your private content area – i’m participant as you- so i only could investigate own or the enfold demo pages to give advice.

June 21, 2022 at 9:25 pm #1356062

In reply to: Mobile "stutter" when scrolling page

https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/#post-1207474

my suggestion is ( i do as participant not see the private content) that the background-image is set to attachment fixed ! ;)

this is a known bug on safari and with iOs devices. Link
A trick to solve this problem is to bypass the attachment fixed property by passing the image to a pseudo-container ( you can take before aswell ) as a background image, but then fixing the pseudo-container. This works much better with an iPhone.

so what to do :

give to the color-section a custom-class: bg-fixed
set the behavior to scroll
put this to your quick css:

.avia-section.bg-fixed {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
  overflow: hidden;
  position: relative;
  top: 0;
}

.avia-section.bg-fixed::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: inherit !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: inherit;
  pointer-events: none;
  will-change: transform;
  z-index: -1;
  visibility: visible !important;
}

June 17, 2022 at 1:52 pm #1355608

In reply to: Product pages not showing and can't access wp-admin

fanlokbun

Hi Rikard,
I have tried restoring but I get critical errors. The host 123-reg say the problem is with the child theme I created for Enfold. Please can you look at my child theme functions,php code and see if it has errors. Apparently it is line 23. My child theme is called Orion I.T. Theme:
<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
//set builder mode to debug
add_action(‘avia_builder_mode’, “builder_set_debug”);
function builder_set_debug()
{
return “debug”;
}

/* Add Custom class to all ALB elements */
add_theme_support(‘avia_template_builder_custom_css’);

/*
Woocommerce 3.0.0 Compatibility Fix
Remove Enfold’s custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}
}

add_action( ‘woocommerce_single_product_summary’, function() {
echo ” – FREE SHIPPING IN THE UK!”;
}, 10);

June 8, 2022 at 10:14 am #1354500

Topic: Enfold 5.0 is now available – please read this before updating

in forum Enfold

Rikard

Keymaster

We’re happy to announce that Enfold 5.0 is finally available. Since this is a major update, we would recommend that users update on a staging or development sites first.

Please see the change log below:

New demo: https://kriesi.at/themes/enfold-parallax/

feature: added position options (responsive) to:
- Image
- Button
- Columns

feature: added "Curtain Reveal Animations" (found in Animations Dropdown) to:
- Image
- Columns
- Masonry
- Masonry Gallery

feature: added Animations Dropdown to:
- Button

feature: added parallax option (responsive) to:
- Image
- Columns

feature: added transform options (perspective, rotate3d, scale3d, skew, translate3d) (responsive) to:
- Image

feature: added options to scale (zoom) and opacity for images when slide becomes active:
- Easy Slider
- Fullwitdh Easy Slider

feature: minimum column height in % of surrounding layout container

feature: theme option to disallow background image parallax and delayed animations on mobile (Performance Tab) - changed to be allowed by default
feature: added swipe to all devices supporting touch screens (not only to mobile devices)
feature: Extended Animations Dropdown with "Advanced Fade Animations", "Special Advanced Animations"

feature: ALB Horizontal Gallery added rotation and styling options
feature: ALB PostSlider added Navigation Dots
feature: ALB Testimonial Slider added navigation styling and animation options
feature: Adjusted options (and new options) for most sliders - under progress:
- Slider Control Styling
- Show Navigation Arrows and Dots (or none)
- Custom colors for Navigation Arrows and Dots
- Transitions and speed
- Autorotate, end with last slide
- Disable/Enable manual rotate (hide corresponding Navigation Arrows)

feature: WPML global layout theme options - keep in sync options for all languages
feature: added support for RankMath SEO plugin (active beta)

tweak: CSS Burger Menu - remove space above mobile menu in landscape orientation and mobile devices
tweak: support image links for slideshows with first slides caption as permanent caption
tweak: option to add "alb templates" to top of page (not only to bottom)
tweak: add option "Use custom link (fallback is image link)" to ALB Masonry Gallery
tweak: ALB Tab Section new option "Deeplink String" (Advanced Tab -> Developer Settings) to set a custom link hash

fixed: Block editor and ALB Tab Section have strange behaviour in backend
fixed: Accordion Slider division by zero if no entries or images
fixed: Anchor column link not working when set to open in the same window
fixed: Block editor typography letter spacing not working
fixed: Google Search only allows 1 tag FAQPage

tweak: jQuery 3.0 remove deprecated $.proxy in all theme files:
- enfold\config-gutenberg\js\avia_gutenberg.js
- enfold\config-templatebuilder\avia-shortcodes\slideshow\slideshow.js
- enfold\config-templatebuilder/avia-shortcodes/slideshow_accordion/slideshow_accordion.js
- enfold\config-templatebuilder\avia-shortcodes\slideshow_fullscreen\slideshow_fullscreen.js
- enfold\config-templatebuilder\avia-shortcodes\menu\menu.js
- enfold\config-templatebuilder\avia-template-builder\assets\js\avia-tab-section.js
- enfold\config-templatebuilder\avia-template-builder\assets\js\avia-tooltip.js
- enfold\js\avia.js
- enfold\js\shortcodes.js
- enfold\framework\js\avia_sidebar.js
- enfold\framework\js\conditional_load\avia_google_maps_api.js
- enfold\framework\js\conditional_load\avia_google_maps_front.js
- enfold\framework\js\conditional_load\avia_google_recaptcha_api.js

tweak: jQuery 3.0 remove deprecated $.fn.focus() in js\aviapopup\jquery.magnific-popup.js

updated: sync all language files version 5.0 (close to final release)
updated: Dutch language files nl_NL (version 5.0 provided by EZWebdesign - Roger Hoen )

DEVELOPER:

tweak: support json string for slideshow options in HTML (data-slideshow-json="...")

added conditional body classes: 
- 'pointer-device-undefined', 'pointer-device-fine', 'pointer-device-coarse', 'pointer-device-coarse-only', 'pointer-device-none', 
- 'touch-device', 'no-touch-device'

added: class aviaPopupTemplatesPlugins

added: filter 'avf_css_rules_position' - allows to alter position rules top bottom left right
added: filter 'avf_css_rules_animation_duration' - allows to alter animation-duration rules
added: filter 'avf_css_rules_animation_delay' - allows to alter animation-delay rules
added: filter 'avf_css_rules_transition_duration' - allows to alter transition-duration rules
added: filter 'avf_el_styling_responsive_styles_skip' - skip creating rules on element basis
added: filter 'avf_get_global_option_keys' - modify global options key attributes before adding to internal logic
added: filter 'avf_is_global_option' - remove a global option attribute

deprecated: AviaHelper::css_4value_helper() no longer needed
removed: $.AviaParallaxElement - replaced by AviaObjectParallaxElement in enfold\js\avia-snippet-parallax.js

renamed: function sonar_keyframes -> keyframes
renamed: filter 'avf_css_rules_sonar_keyframes' -> 'avf_css_rules_keyframes'

May 18, 2022 at 1:18 pm #1352177

In reply to: Add Search Icon On Mobile

Hey navindesigns,
Thank you for your patience and login, in your function above I replaced the item class noMobile with menu-item-search-mobile
Then I added this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_burger_search_mobile() { ?>
    <script>
(function($){
$('#avia-menu').one('click', function(){
jQuery('#menu-item-search.menu-item-search-mobile').clone().wrapInner('<div class="burger_search_mobile"/>').children(0).unwrap().prependTo('#av-burger-menu-ul');
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_burger_search_mobile');

and this css to your child theme stylesheet:

#av-burger-menu-ul > .burger_search_mobile {
	padding-left: 20px;
}
.avia_mobile #top #av-burger-menu-ul > .burger_search_mobile #searchsubmit {
    height: 100%;
}

Now your search shows at the top of your mobile menu:

Please clear your browser cache and check.

Best regards,
Mike

April 21, 2022 at 2:10 pm #1349025

In reply to: GiveWP + Events Calendar + WooCommerce + Enfold = multiple AVIA element failures

Hi,
The Dev Team has checked your error logs and found that it seems to be a problem with the post status beeing duplicated in query in an endless loop, but our query parameters do not have a post_status set (see postslider.php:1196) and testing with print_r( $query ); gives:

As you see above there is no post status in the query parameters.
Seems, that because this is a secondary query one of the plugins has a problem handling this (most likely the GiveWP). But we cannot fix this.

Best regards,
Mike

April 12, 2022 at 9:59 am #1348064

In reply to: Clickable image on button

choose for that button alb element the option to have an icon. place it where you like – even to see only on hovering.
then replace that icon by an image via quick css.
To better select the specific button – give a custom class to the button alb itself – f.e.: imagebutton

.avia-button-wrap.imagebutton {
  overflow: hidden;
}

.imagebutton .avia_button_icon {
  height: 0px;
  overflow:visible;
  display: inline-block;
  vertical-align: top !important;
}

.imagebutton .avia_button_icon::before {
  content: "";
  background-image: url(/wp-content/uploads/IMAGE.svg);  /*** path to your image file ***/
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  position: relative;
  display: inline-block;
  top: -11px;
  left: -5px;
}

See here – buttons on the right – green or blue one: https://webers-testseite.de/buttons/

April 3, 2022 at 9:44 pm #1347076

In reply to: is it possible to get this layout?

Hey Jonas,
Thank you for your question, I was able to get pretty close to your mockup using columns with background images and custom css.
This is the desktop view:

notice that most are 1/3 square with the top left one being 2/3 square taking up 4 spaces, and in the middle right is one 1/3 tall being 2 blocks tall.
on tablet, 768px, they retain their ratios but are narrow:

and on mobile they all become full width and equal height:

So each of the columns has a custom class to create this and the one-third-tall & one-third-under have been set with top & clear to place them were they are. You will probably need to take care with how much content you add to these to not change their height.
You can remove the special-heading elements and the display: flex; align-items: center; from the css, as it was to center the special-heading.
If you Enable the Avia Layout Builder Debugger on your site you can add this page shortcode to test on your site:

[av_two_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-1.jpg' attachment='866' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='two-thirds' template_class='' aria_label='' av_uid='av-l1jjt2et' sc_version='1.0']

[av_heading heading='Two Thirds' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm7hat' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_two_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-2.jpg' attachment='862' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjtztc' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm81hx' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-4.jpg' attachment='863' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-2xo2xi' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-74tlzq' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-5.jpg' attachment='868' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjusx8' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-5yz9li' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/isometric-1.jpg' attachment='447' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third-tall' template_class='' aria_label='' av_uid='av-l1jjwv99' sc_version='1.0']

[av_heading heading='One Third Tall' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm8ztq' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-9.jpg' attachment='865' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjz118' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-4p5yli' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-1.jpg' attachment='866' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjv7wz' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-365q0m' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-5.jpg' attachment='868' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third-under' template_class='' aria_label='' av_uid='av-l1jjzvnn' sc_version='1.0']

[av_heading heading='One Third Under' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm9z90' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third]

This is where my example is.
This is the css for the page:

@media only screen and (min-width: 768px) { 
.one-third-tall {
	height: 819px;
	clear: initial;
	top: -436px;
    float: right!important;
    background-position: 50% 50% !important;
	display: flex;
    align-items: center;
}
.one-third {
	height: 385px;
    background-position: 50% 50% !important;
	display: flex;
    align-items: center;    
}
.two-thirds {
	height: 819px;
	background-size: cover !important;
	display: flex;
    align-items: center;    
}
.one-third-under {
	height: 385px;
	top: -436px;
    background-position: 50% 50% !important;
	display: flex;
    align-items: center;    
}
}
@media only screen and (max-width: 767px) { 
	.one-third,
	.one-third-under,
	.one-third-tall,
	.two-thirds {
		height: 361px;
		display: flex;
        align-items: center;
	}
	
}
.av-special-heading {
	background-color: rgb(255 255 255 / 75%);
}

Best regards,
Mike

PS. I see that you have asked this through our PreSaleRequest Contact form, for further questions please login to the support forum and create a new thread so we can help you and other users can benefit from the solutions. Thank you for using Enfold.

March 25, 2022 at 10:06 am #1345974

In reply to: Fullwidth Easy Slider change caption to Modern H3

i guess the most important difference is the font-weight: 300

to address the captions specifically it is maybe a good idea to place a custom-class either to the whole slider or to the slide
f.e.: modern
If you have the custom-class on the alb itself – all caption titles will be then in font-weight: 300
if you have the custom-class only on the slide – only this will be selected ( see above image : Custom CSS Class For Heading Tag )

.modern .avia-caption-title , 
.avia-caption-title.modern {
  font-weight: 300 !important;
}

March 19, 2022 at 11:32 pm #1345229

In reply to: Changement couleur et police ne fonctionne pas

Hi,
Thank you for the link to your site, I added a custom class to your shortcode after-price

and this css:

#main .after-price.avia-icon-pos-left {
    float: none;
}
#main .after-price.av_font_icon {
    display: inline-block;
}

and now the icon shows after the price, please clear your browser cache and check.

Best regards,
Mike

March 5, 2022 at 6:35 pm #1343273

In reply to: image size

Hi,
Thank you for your patience and the link to your page, your first image in the text block behaves differently because it is not a background image like your second one.
An image in a text block is wrapped in a paragraph tag that adds some margin and it’s display is set to inline-block.
We can adjust this with css and set it to cover the element, similar to how a background image does.
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.flex_column.av_two_fifth .avia_textblock > p {
	margin: 0;
}
.flex_column.av_two_fifth .avia_textblock > p > img {
	display: block;
	object-fit: cover;
	height: 327px;
	width: 455px;
}

it will work on your first image but you will not want this to work on all images because it could cause conflicts and the height and width must be set, so I recommend adding a custom class to your column and adjusting the css above to match.
If your not sure how to adjust the css, then add a custom class to your column and tell us so we can advise.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

March 3, 2022 at 9:52 pm #1343056

In reply to: Horizontal gallery image caption

So i would change Mikes Code a little.
And to have that not on all horizontal galleries – i would give a custom-class to the ALB Element f.e.: subline-gallery

function horizontal_gallery_subline(){
?>
<script>
(function($){
	$('.av-horizontal-gallery.subline-gallery').css("padding-bottom" , "30px" );
	$('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-link').css("bottom" , "50px");
	$('.av-horizontal-gallery.subline-gallery .avia-slideshow-arrows a').css("top" , "40%");

	$('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-img').each(function(){
	    var imgTitle = $(this).attr('title');
	    var imgAlt = $(this).attr('alt');
	    $(this).after('<span class="title-under-image">' + imgTitle + '</span><span class="alt-under-image">' + imgAlt + '</span>').css({"margin": "-20px 0"});
	    $(this).css({
	        "padding-bottom"    : "20px",
	        "background-color"  : "transparent"
	    });
	    $('.title-under-image').css({
	        "display"       : "block",
	        "text-align"    : "center",
	        "color"         : "#000",
	        "font-weight"   : "bold"
	    });
	    $('.alt-under-image').css({
	        "display":"block",
	        "text-align": "center",
	        "color": "#444"
	    });
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_subline');

test-page: https://webers-testseite.de/horizontal-gallery/

March 1, 2022 at 8:14 pm #1342764

In reply to: Image Flip Box

i would have done that by using the icon grid alb element too – but i place in the background content two images – the first placed image i take for the background-image of the front by jQuery script.

not to have that on all icon grids – i give the element a custom class – f.e.: icongrid-frontimage

function insert_frontside_image(){
?>
<script>
(function($){
$(document).ready(function(){ 
	$('.icongrid-frontimage .article-icon-entry .avia-icongrid-front').each(function(){
		var backside_img = $(this).next().find('img:first-child').attr('src');
		$(this).find('.avia-icongrid-icon').css('display', 'none');
		$(this).prepend('<div class="frontside_background"></div>');
		$(this).find('.frontside_background').css({
			'background-image': 'url('+backside_img+')',
		})
	});	
});			
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_frontside_image');

the rest is quick css – see resultpage: https://webers-testseite.de/icongrid-with-frontimage/

PS: If you use the element only once, I can’t recommend this solution. But if you want to use the background image on the front often, it has the advantage of being able to select the images via Media Library.
If you are interested i will post the css code here too.
( see f.e. too: https://consulting.webers-testseite.de/leistungen2/ )

February 27, 2022 at 11:04 pm #1342496

In reply to: Animation on element

Hi,
Thank you Guenni007 this is a good point.
So to expand on the above example to trigger the animation when the element is in view and not just on page load, we will add the class avia_animate_when_visible to the custom class with a space after the text-box-left or text-box-right classes

and changed the css to this:

  @keyframes slide-in-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }


  .text-box-right.avia_start_animation {
    animation: slide-in-right 1000ms;
  }
  .text-box-left.avia_start_animation {
    animation: slide-in-left 1000ms;
  }

note the avia_start_animation class in the css, the waypoint script that Guenni007 pointed out changes the avia_animate_when_visible class to avia_start_animation so the css will work.

Best regards,
Mike

February 13, 2022 at 12:05 am #1340322

In reply to: Styling of burger fly-out-menue

Hey Jak73,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a {
    border-color: #fff;
}
#top #wrap_all .av-burger-overlay #av-burger-menu-ul li a .avia-menu-text {
	font-size: 18px;
	font-family: 'verdana';
}
#av-burger-menu-ul {
    background-repeat: no-repeat;
    background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg);
    background-position: 50% 100%;
    background-attachment: scroll;
    background-size: cover;
}

adjust the background image to suit but ensure it is in a profile image that meets the desktop size at minimum, the mobile should be the same aspect and scales down fine.

Best regards,
Mike

February 9, 2022 at 9:12 am #1339728

In reply to: Make three Images on top of each other … ???

Ismael

Hey beyond-flora,

Thank you for the inquiry.

You can pull or push an element by applying a custom margin to it. For example, to pull the second image to the left in the page above, you can use this css code.

.avia-image-container.av-kzeaghl3-a6e92917bbdb004515dac8f8c0d8dea3 {
    margin-left: -100px;
}

You can use the autogenerated class name (av-kzeaghl3-a6e92917bbdb004515dac8f8c0d8dea3) above, but you can also apply a custom css class name or ID to the elements in order to style them directly. The custom css class name and ID field is in the elements’ Advanced > Developer Settings toggle.

Best regards,
Ismael

February 6, 2022 at 3:24 pm #1339177

In reply to: Adapt Image Size for Mobile

Hey markus-fischer,
Thank you for the link to your site, but since your screenshot requires a login we can not see it.
Please try not to require a login for your screenshots so we can see them.
So I guess that you are talking about the light bulb image on your site for mobile, since it is for a “specific” image the WordPress image class for this image is wp-image-3399 so this css will reduce it’s size below 430px:

@media only screen and (max-width: 430px) { 
.wp-image-3399.avia_image {
	max-width: 50%;
	max-height: 50%;
	margin: auto;
}
}

After applying the css, please clear your browser cache and check.
If you have a group of these images you can add a custom class in the advanced options of the image element and use it instead of the WordPress image class in the css.

Best regards,
Mike

February 5, 2022 at 8:26 pm #1339090

Topic: Custom ID images

in forum Enfold

grassifrancesca

Participant

Hi guys,
I’m adding some CSS to make my website work better on mobile.
The website is aligned left on desktop but I’d like to have it aligned center on mobile.
I have a series of small graphic dividers used across the whole website which I’d like to align center on mobile. I was thinking to add the same custom class to all those little dividers (they are jpeg, so inserted as images in a column) and then moving them all together on mobile. I can not figure out how to do that.
I started with:
@media only screen and (max-width:989px)
.avia-image-container-inner #greca {
float: right!important;
}

Where #greca is the custom class, but it doesn’t work.
Any chance you can help me?
Many thanks

Desktop

Mobile

January 16, 2022 at 2:28 pm #1335746

In reply to: Overlapping column

Hi,
Thanks for the feedback, I see that you are using the element builder class numbers in your css, which is ok, but please keep in mind that if you add or change elements on this page in the future the builder class numbers will probably change and your css won’t work, naturally if you notice this you can easily adjust the css. The alternative to builder class numbers is using the custom class names in the elements:

Anyways, I see your css is working:

#top.page-id-3983 #main .avia-builder-el-4 {
position: relative;
left: -50px;
top: 30px;
}

#top.page-id-3983 #main .avia-builder-el-22 {
position: relative;
left: -50px;
top: 30px;
}

#top.page-id-3983 #main .avia-builder-el-11 {
position: relative;
right: -50px;
top: 30px;
}

so thank you to @guenni007 for the help and good job applying it to your situation, the only issue you had left was the middle row had the image over the text element instead of the other way around, so to correct we just needed to adjust the z-index like this:

#top.page-id-3983 #main .avia-builder-el-18 {
position: relative;
z-index: 0;
}

I added this for you so please clear your browser cache and check.

Best regards,
Mike

December 26, 2021 at 3:29 am #1333993

In reply to: image height at percentage of browser height

Ismael

Hi,

Thank you for the info.

We could define the minimum and maximum height of the image but it might get distorted on certain screen sizes. If that is not a problem, try try this css code.

img.wp-image-3530.avia-img-lazy-loading-not-3530.avia_image {
    height: 50vh !important;
    max-height: 50vh !important;
    min-height: 50vh !important;
}

You may need to apply a custom css class name or ID to the image element and replace the css selector above.

Best regards,
Ismael

December 24, 2021 at 3:53 am #1333904

In reply to: Add Icon to Colored Menu Item