Hi,

this issue is still relevant for me (Enfold 4.7.6.3). The given solutions do not work for me.
When I’m using “do_shortcode($content)”, some columns get 100% width – just as BlutVampir described.
The shortcode I’m using is just an icon:

[av_font_icon icon='ue906' font='econsor-system-icons' style='' caption='' link='' linktarget='' size='20px' position='right' animation='' color='#21759b' av_uid='' custom_class='' admin_preview_bg=''][/av_font_icon]

If replaced with a button, the problem still persists.
Is there something new about this issue?

Best regards,
Fabian

i too can not see the reason for it
on the code i do not see any setting for screen element visibility. As you can set on Advanced Tab of the testimonial element itself.
But i do see your testimonial on an iphone 8
maybe it is on your end a caching problem – go to your iphone settings – safari and empty the browser cache.

by the way : can you have a look on your testimonials if you set up this to your quick css:
(you had to download the “3d shadow” from my server – and change the url in the css – but for first test it will work )

.av-large-testimonial-slider .avia-testimonial_inner {
    background-color: #ecf6ff;
    display: inline-table;
    padding: 40px;
    border: 1px solid #aaa;
    position: relative;
    box-shadow: 0 3px 10px -8px #333;
    -webkit-transform:  skew(-3deg);
    transform: skew(-3deg);
}

.av-large-testimonial-slider .avia-testimonial_inner::before {
    content: "\e833";
    font-family: entypo-fontello;
    font-size: 70px;
    position: absolute;
    top: -15px;
    left: 15px;
    -webkit-filter: drop-shadow(2px 2px 3px #666);
    filter: drop-shadow(2px 2px 3px #666);
    color: #3579b4
}

.av-large-testimonial-slider .avia-testimonial_inner::after {
    content: " ";
    background-image: url("https://webers-testseite.de/wp-content/uploads/testimonial-shadow.png");
    background-repeat: no-repeat;
    width: calc(100% + 60px);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-position: bottom right;
    overflow: visible !important;
    background-size: 60px;
    opacity: 0.3;
}

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
    margin-top: 50px !important;
}

.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0px 10px;
}

.responsive #top .avia-slideshow-controls a {
    display: block;
}

.avia-slideshow-arrows a {
  overflow: visible !important;
  text-indent: -5000px !important
}

.avia-slideshow-arrows a.prev-slide::before {
  left: -110px;
}

.avia-slideshow-arrows a.next-slide::before {
  left: 80px;
}

see here: https://webers-testseite.de/testimonial-styling/

there are ways with jQuery to get a timeline ALB to something like this – but – that is too complicated i think:
the code above is clear enough – and pure html – and very fast to add a lot of timeline-blocks
better you forgot the next !!!

child-theme functions.php:

function timeline_reconstruction(){
?>
<script>
(function($) {
	$('.av-milestone-date').each( function() {
	     var mstoneDate = $(this).html();
	     $(this).find('.av-milestone-indicator').html('<div class="sign"></div>');
	     $(this).siblings('.av-milestone-icon-wrap').html(mstoneDate);
	     $(this).css('opacity', '0');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'timeline_reconstruction');

.av-milestone-indicator {
  position: absolute;
  content: "";
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/wp-content/uploads/a-nice.svg);
  background-repeat: no-repeat;
}

.av-milestone-icon-wrap strong {
  font-size: 24px
}

and you may have this only for the non responsive case in a media query with min-width.

h- hhh – clears throat – and why not cloneing ? ;)

put a codeblock element in a column (1/1)
and insert that html pasted from that page:

<div id="timeline"> <!-- opening tag of the timeline -->

      <!--  So this is the always the same block  -->
      <div class="timeline-block">
        <div class="timeline-date">
          <h3><em>Text</em> Date <em> after Date </em></h3>
        </div>
        <div class="timeline-content">
            <h3>Title</h3>
            <p>Text-block</p>
        </div>
      </div>
       <!--  End of timeline item -->

</div> <!--  Closing tag of the whole timeline -->

quick css for that:

#timeline {
 margin: 30px 30px 80px;
 position:relative
}
#timeline .timeline-block {
 width:100%;
 float:left;
 position:relative
}
#timeline .timeline-block:before {
 content:'';
 position:absolute;
 top:0;
 left:15%;
 height:100%;
 width:1px;
 background:#433322;
 margin-left:-1px;
 z-index:-1
}
#timeline .timeline-date {
 float:left;
 text-align:center;
 width:30%;
 height:100%;
 background:url('/wp-content/uploads/separator-2.svg') no-repeat #f5ede2;
 background-position:center bottom 10px;
 background-size:auto 10px;
 padding:10px 0 30px 0;
 margin-top:5px
}
#timeline .timeline-date h3 {
 margin:0
}
#timeline .timeline-date h3 em {
 font-style:normal;
 font-size:1.2rem;
 display:block
}
#timeline .timeline-content {
 width:70%;
 float:right;
 position:relative;
 padding:20px 0 80px 0;
 box-sizing:border-box
}
#timeline .timeline-content:last-child {
 padding-bottom:0
}
#timeline .timeline-content h3 {
 text-align:left
}
@media only screen and (min-width:960px) {
 #timeline .timeline-block {
  width:58.8%;
  float:right
 }
 #timeline .timeline-block:nth-child(even) {
  float:left
 }
 #timeline .timeline-block:nth-child(even):before {
  left:auto;
  right:15%;
  margin-left:0;
  margin-right:-1px
 }
 #timeline .timeline-block:nth-child(even) .timeline-date {
  float:right
 }
 #timeline .timeline-block:nth-child(even) .timeline-content {
  float:left
 }
 #timeline .timeline-block:nth-child(even) .timeline-content,
 #timeline .timeline-block:nth-child(even) .timeline-content h3 {
  text-align:right
 }
}

https://webers-testseite.de/timeline-2/

please try this in your child-theme functions.php:

function change_scroll_top_link(){
?>
<script type = "text/javascript">
(function($){
	$('#scroll-top-link').attr('href', '#newID');
	$('#scroll-top-link').attr('title', 'Get in touch');
	$('#scroll-top-link .avia_hidden_link_text').text('Get in touch').css({
		'display': 'block',
		'position': 'absolute',
		'top': '-40px',
		'left': '-40px',
		'width': '120px',
		'font-size': '14px',
	});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'change_scroll_top_link' );

But: maybe it is enough if you have the title to have “Get in touch” – and to have that on hover
Then remove the css part

if you had to do it only for one page:

function change_scroll_top_link(){
if(is_page(5)){
?>
<script type = "text/javascript">
(function($){
        // same as above
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_footer', 'change_scroll_top_link' );

or for more than one page replace it with an array of pages
if(is_page(array( 1396, 1617, 1629))){

Hi Yigit.

Similar problem here, regarding Caption (and Title too) font size in mobile devices. I added the code you sugest to Enfold>General Styling CSS area, but no changes are reflected into Easy Slider full whidth I’m creating.

Best regards.
Eduardo

PS: wenn es sich nur um diese Seite ( bzw ist ja ein single post) könnten wir das ganze noch nur für diese Seite setzen.
z.b #top.postid-3432 .mfp-top-bar
und if(is_single(3432)){ … }

und da du ja ohnehin noch in alle nochmal rein musst (ist momentan ja nur das Angst Video zu sehen) , um die Links zu setzen, – du brauchst hierfür nicht mehr das addendum “?iframe=true” setzen, da wir ja unseren eigenen Trigger zur Auslösung der Lightbox definiert haben. Für SEO wäre es schon besser du würdest dann auch den Title richtig setzen – obwohl wir Ihn ja momentan nicht benötigen.
Innerhalb der Text Box reicht es wenn du die Begriffe so setzt:

<a href="/wp-content/uploads/Future-12917-1.mp4" target="_blank" rel="noopener">etwas anderes</a>

PPS:
– die spans benötigst du auch nicht, das würde ich über quick css auf einmal setzen:

#after_submenu .avia_textblock p {
	font-weight: bold;
	font-size: 14pt; 
	font-family: verdana, geneva, sans-serif;
}

– damit die Video Galerie nun nur innerhalb eines Anfangsbuchstaben rotieren ( loop ) können wir Gruppen setzen.

Hey,
for me, this is where the question comes in, using the above code (<span style=”font-size: 14pt; font-family: verdana, geneva, sans-serif;”>abgeschreckt sein</span>)
How can a caption be placed as a short text UNDER the video.

Is there a solution for this ; )?
Best regards,
Gabi

why did you place the video in a 1/2 container and have two 1/4 empty containers besides?
If you like to have the video as wide as the slider take a 1/1 container and get rid of the two 1/4 columns.

______

you have this rule in your css:

#top #wrap_all .all_colors h1 {
    color: purple;
    font-size: 32px;
    font-family: raleway,helveticaneue,helvetica neue,helvetica-neue,Helvetica,Arial,sans-serif;
    text-transform: lowercase;
}

The text-transform is the point you had to change. You can have here captalize ( only first letters are big) or uppercase ( all Letters are big ) etc.
because you have merged js files i cannot say exactliy where it comes from ( quick css or maybe Enfold – Advanced Styling)
The merging seems to come from siteground-optimizer – have a look if your settings are refreshed after changing something.
My advice – as long as you are not ready with layout and styling – switch off all merging and caching. When you are finished – then test performance with all switched on.

If you only like to influence the subtext in your logo :

#top #wrap_all .all_colors .logo .subtext h1 {
    font-size: 14px !important;
    text-transform: uppercase;
}

• This reply was modified 5 years ago by Guenni007.