Hi,
I logged in to make the changes for you but your Appearance > Editor is not showing, are you using a security plugin to block some features?
Anyways, first you will need to enable the custom css option:
Go to your Appearance > Editor > functions.php and look for this at the end of the file:

// add_theme_support('avia_template_builder_custom_css')

remove the // and save.
Then go to your page and edit the column, you will see a new option box at the bottom “Custom Css Class”
add this to it:

fixed_element

Then add the script above in the functions.php file and save
Then go to Enfold Theme Options > General Styling > Quick css , which is at the bottom of the page
and add the other code.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

Best regards,
Mike

Hey simsb79,
Try using the masonry gallery element, I recreated the page by using the same images and settings the columns to 3 and number of images to 4 with the “Perfect Automatic Masonry” chosen as the size option.
Then I choose to use the image title as the mouse overlay. That is what gives you the animation.
Note that the 16:9 ratio is key to having the wide or tall images use two blocks.

Best regards,
Mike

• This reply was modified 7 years, 8 months ago by Mike.

Hi,
Try:

#socket {left: 5%!important; }

Best regards,
Mike

Hi,
To open a modal in Enfold you would need to use the lightbox and use the ?iframe=true
This is how to make a link for an image to open in lightbox, use in a code block element:

<a href="http://127.0.0.1/wp-content/uploads/2015/07/portfolio-9.jpg" rel="prettyPhoto" title="">Image</a>

To open pages in lightbox using an iframe, create a link like this in a code block element:

<a href="http://127.0.0.1/pages/blank-pages/coming-soon-page/?iframe=true">Page</a>

This is the format for opening a Youtube video in lightbox:

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

But since you are having compatibility issues you could try a plugin such as: Modal Window

Best regards,
Mike

Hi,
To add a phone icon next to support, add the icon shortcode to the menu navagation label:

[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color='' admin_preview_bg=''][/av_font_icon]

Best regards,
Mike

Hey 4ROI,
#2: To change the font size of the testimony slider you will want to target:

.avia-testimonial_inner p {font-size: (your-size)px !important; }}

so for between 768 & 1024:

@media only screen and (min-width: 767px) and (max-width: 1024px) {#top .avia-testimonial_inner p {font-size: 12px !important;}}

but it doesn’t address the width of the element unless you add:

@media only screen and (min-width: 767px) and (max-width: 1024px) {#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {padding: 0px 50px!important;}}

is that what you had in mind?
#1 Try this code, it is set for 1025, so it will work on 1024 but you may want to set it higher like 1100. Test and adjust to suit.

@media only screen and (max-width: 1025px) {
	
  .responsive .boxed #wrap_all { overflow: hidden; /*needed for mobile menu scrolling */ }
  .responsive #top { overflow-x: hidden; }
  .responsive .boxed#top, .responsive #top.boxed .stretch_full , 
  .responsive.html_boxed.html_header_sticky #header,
  .responsive.html_boxed.html_header_transparency div #header{ width: 100%; max-width: 100%; }
  
  .responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left:0;
    padding-right:0;
    float:none;
  }
  .responsive .units, .responsive .unit {
    margin: 0;
  }
  
  .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }
  
  .responsive #top #wrap_all .av-flex-cells .no_margin{
	  display: block;
	  margin: 0;
	  height:auto !important;
	  overflow: hidden;
	  padding-left:8% !important;
	  padding-right:8% !important;
  }
  
  .responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner{
	    width: 100%;
		max-width: 100%;
		margin: 0 auto;  
  }
  
  .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding{
	  padding-left:0% !important;
	  padding-right:0% !important;
  }
  
  .responsive #top #wrap_all .flex_column:empty{margin:0;}
}

Best regards,
Mike

Hi,
Try this code in the General Styling > Quick CSS field:

#top.rtl .main_menu .menu li {
    float: none!important; 
}

Best regards,
Mike

Hey Mark,
From what I have read this has been a factor that is being implemented in stages, to give every one time to switch.

Best regards,
Mike

Hi,
Can you please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

Hi,
Thanks, Glad we were able to help, we will close this now. Thank you for using Enfold.

Best regards,
Mike

Hey th-photography,
I understand, but all of the images on a page that are lightbox enabled will show in the lightbox. We don’t have a way to exclude a certain image. Solutions to this are:
1. Add the no pointer event (your using this now)
2. You can edit your blog posts and choose not to display featured image on single posts
3. add the “noLightbox” class to your /enfold/includes/loop-index.php
starting at line 196 look for:

				        if($slider) $slider = '<a href="'.$link.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
				        if($slider) echo '<div class="big-preview '.$blog_style.'">'.$slider.'</div>';
				    }
					
				    if(!empty($before_content))
				        echo '<div class="big-preview '.$blog_style.'">'.$before_content.'</div>';

replace with:

				        if($slider) $slider = '<a href="'.$links.'" title="'.$featured_img_desc.'">'.$slider.'</a>';
				        if($slider) echo '<div class="big-preview noLightbox '.$blog_style.'">'.$slider.'</div>';
				    }
					
				    if(!empty($before_content))
				        echo '<div class="big-preview noLightbox '.$blog_style.'">'.$before_content.'</div>';

Best regards,
Mike

Hi,
I fixed the name, Glad we were able to help, we will close this now. Thank you for using Enfold.
Best regards,
Mike

Hey CloudChoice,
This has been reported as the vimeo player.
The solution reported was adding &api=1 to the vimeo url to remove the error.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

Best regards,
Mike