Hi,

Thank you for the update.

You can add this css code to align the social icons and the subnavi beside each other.

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

  /* Add your Mobile Styles here */
  .responsive #top #header_meta .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .responsive #top #header .social_bookmarks {
    display: block !important;
    float: none;
    width: auto;
  }

  .responsive #header .sub_menu,
  .responsive #header_meta .sub_menu>ul {
    float: none;
    margin: 0;
    width: auto;
    position: relative;
    margin-top: -10px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

We edited the css code and added a few css media queries to adjust the height of the images on tablet view or smaller screens and prevent distortion.

This is the modified css code.

@media only screen and (min-width: 990px) {
  #top.archive .thumbnail_container img {
    height: 324px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  #top.archive .thumbnail_container img {
    height: 224px;
  }
}

@media only screen and (max-width:767px) {
  .responsive #top #main .sidebar {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }

  .responsive #top #main .sidebar .inner_sidebar {
    margin-left: 0 !important;
  }

  #top.archive .thumbnail_container img {
    height: 178px;
  }
}

Please make sure to purge the cache before checking the page.

Best regards,
Ismael

Hey korpak,

Thank you for the inquiry.

You have to use add_action instead of add_filter because ava_after_content is an action hook.

// https://developer.wordpress.org/reference/functions/add_action/

Examples can be found in the following threads.

// https://kriesi.at/support/topic/is-it-possible-to-place-a-button-at-the-bottom-of-all-blog-posts/#post-1418664
// https://kriesi.at/support/topic/custom-post-archive/#post-1302542
// https://kriesi.at/support/topic/is-it-possible-to-place-a-button-at-the-bottom-of-all-blog-posts/#post-1418240

Best regards,
Ismael

Hey sarawh,

Thank you for the inquiry.

You can use the avf_modify_thumb_size filter to adjust the dimension of the existing thumbnails instead of directly editing the functions.php file. Usage examples can be found in the following threads.

// https://kriesi.at/support/topic/alter-featured-image-on-blog-does-not-work/#post-1342432
// https://kriesi.at/support/topic/title-and-image/#post-1304670
// https://kriesi.at/support/topic/source-for-masonry-image-size/

Best regards,
Ismael

Hi,
When you say that you don’t like the text wrapping, I assume that you want the tooltips larger, currently they are 250px, try this css and adjust to suit:

body#top .av-tt-large-width {
    width: 300px;
}

It looks like to place the tooltip over the other numbers you need to set the z-index of the open tooltip parent av-image-hotspot to at least 3.
So this will need to be done with jQuery in the above script, perhaps something like $(this).parent().find(‘.av-image-hotspot’).css({‘z-index’:’3′});
For me the draw open looks like a cool animation, but I think to remove it we need to add and remove opacity to the script, I will try to adjust this later unless you get to it first.

Best regards,
Mike

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

#top.post-type-archive-product .template-shop.content.av-content-full.alpha.units  {
	display: none;
}

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

Best regards,
Mike

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

@media only screen and (max-width: 767px) { 
	.responsive #top #wrap_all #main {
		padding-top: 90px !important;
	}
	.responsive #top.home #fullslider {
		margin-top: 90px;
	}
}

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

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

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

Best regards,
Rikard

Hey Martin,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.responsive #top #header .social_bookmarks {
    display: block !important;
}
}

Best regards,
Rikard

Hi,
On your other thread about this I posted this:
In my test with the hotspot tooltip set to show – always
this hides all of the tooltips until one is clicked and when the next one is clicked the others are hidden.

(function($) {
 $(window).ready(function() {
           $('.avia-tooltip').hide();	
       $('.av-image-hotspot_inner').on( "click", function(e) {
       	var $this = $(this).parent().find('.avia-tooltip');
	      $(this).siblings('.avia-tooltip').toggle('slow');
	      $('.avia-tooltip').not($this).hide();
        });
     });
})(jQuery);

Best regards,
Mike

Hi,
Thank you for your patience, to make the header sticky on mobile try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

For the mobile menu fonts try this css:

@media only screen and (max-width: 767px) {
	#av-burger-menu-ul a {
	font-family: kalam;
}
}

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

Best regards,
Mike

Hey mediafacto,
Thanks for the link to your site, in the popup the blue one was not correct, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to correct:

#top .mfp-content .avia-button.av-4pqcoe-31648334b4896fbdfea9d05f47606f6f,
#top .mfp-content .avia-button.av-eh4dwu-7ff5582dbec01723c9e3c0eb24a72468{
    background-color: #0e76a8;
    border-color: #0e76a8;
    color: #ffffff;
}

After applying the css, please clear your browser cache and check.
To stop your page from scrolling try adjusting your script to this solution.

Best regards,
Mike

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

#top #main #commentform .comment-form-rating label[for=rating]{
	background:green;
	color:red;
	font-size: 25px;
}

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

Best regards,
Mike

Hey Yaphoon,
For your Gaode Map page try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.page-id-53 #av_section_1 .container {
	max-width: 100%;
	padding: 0;
}
.responsive #top.page-id-53 #av_section_1 .container main {
	padding: 0;
}

the expected results:

as for your mega menu, it looks like each of your menu items is a column title which by defalt has a different color and font size than the regular menu items:

so perhaps you could adjust the mega menu items to correct your font size and color.
I don’t know what you mean by “adjust the square size”, if you mean the whole mega menu size, it is created by the number of items in it with js and not easy to change.

Best regards,
Mike

Hi,
If you are using a child theme then yes leave the code in the functions.php, otherwise I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and you will not lose your code when you update as you would if the code is in your parent theme functions.php.
To change it into a button using the magic wand in the Post editors we will need to change the function a little to use do_shortcode
Here is an example that I tested on my yest site and works, you can change the button code to suit your needs:

add_action("ava_after_content", function() {
    if (is_singular('post')) {
        echo do_shortcode("[av_button label='Back to Bolg' icon_select='yes' icon='ue830' font='entypo-fontello' icon_hover='aviaTBicon_hover' link='manually,#' link_target='' size='medium' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']");
    }
}, 10);

Best regards,
Mike