several problems: text & images not appearing on mobile

[adventium]

On https://bodhizone.adventium.net:
• the text in the orange box with Comprehensive Services appears on desktop but not mobile
• on mobile, under classes, there is no space between Barre and the Body Sculpting image

On https://bodhizone.adventium.net/about.html, under Reviews, how can I make just the quote marks orange?

Thank you!

---

[Support]

Hello,

1) We don not recommend to use animated letters to long texts (multiple paragraphs), but if you still want to use it you need to change ‘minWindowWidth’: from 992 to 0.

<h2 class="text-5 mb-0" data-plugin-animated-letters data-plugin-options="{'animationName': 'fadeInUpShorter', 'animationSpeed': 20, 'startDelay': 0, 'minWindowWidth': 0}">

2) Add these classes in that block only:

3) Add this:

(css/custom.css)

.testimonial.testimonial-with-quotes blockquote:before {
    color: var(--primary) !important;
}

Best Regards.

---

[adventium]

Thank you so much for your help! The type in item #1 is breaking between a word on mobile. I tried adding </br> but it wouldn’t break. Is there a way to force line break for mobile but not desktop? Also, there’s too much margin below the text on mobile (looks ok and even on desktop). Is it possible to shorten the margin/padding on bottom for mobile?

---

[Support]

Hello, like I said, the problem is that animated letters works better with small text (titles) and not paragraphs. If you want to have better control over it, my suggestion is that you have a version that appear on desktop only and other for mobile, example:

<div class="d-none d-lg-block">
	<h2 class="text-5 mb-0" data-plugin-animated-letters data-plugin-options="{'animationName': 'fadeInUpShorter', 'animationSpeed': 20, 'startDelay': 0, 'minWindowWidth': 0}">
		Text that will appear only on desktop here, with effect.
	</h2>
</div>

<div class="d-block d-lg-none">
	Text that will appear only on mobile here, without effect.
</div>

However, it’s not a good practice, so, only fadeIn would work better:

<div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0" data-appear-animation-duration="1s">
	Text with only fadeIn here...
</div>

---

[Author]

Posts