span issue

[tad72]

I’d like to have text go across the slider but Ive been unsuccessful due to a few of the classes associated with the span I’m trying to edit. In this screenshot I used the text ‘this is a test’ and you’ll notice that the text stays aligned within the span I’d like to have the width of the span increased but everything I’ve tried has not worked. The text I have is about this long and I need it on one line. https://prnt.sc/vib422 the red rectangle shows what I’m looking to do. This site is on a local install. Thank you.

---

[tad72]

code in question:

<!-- Carousel Slide 1 -->
						<div class="position-relative overlay overlay-color-primary overlay-show overlay-op-8" data-dynamic-height="['670px','670px','670px','550px','500px']" style="background-image: url(img/slides/slide-corporate-1-1.jpg); background-size: cover; background-position: center; height: 670px;">
							<div class="container position-relative z-index-3 h-100">
							  <Div class="row justify-content-center align-items-center h-100">
									<div class="col-lg-6">
										<div class="d-flex flex-column align-items-center">
											<h3 class="position-relative text-color-light text-4 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
												<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
													<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
												</span>												WE CREATE DESIGNS, WE ARE

												<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
													<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
												</span>
											</h3>
										  <h3 class="porto-big-title text-color-light font-weight-extra-bold mb-3 initialized text-left" data-plugin-animated-letters="" data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, animationSpeed': 250, 'animationName': 'fadeInRightShorterOpacity', 'letterClass': 'd-inline-block'}" style="min-height: 229.333px;"><span class="letter d-inline-block fadeInRightShorterOpacity animated" style="animation-delay: 0ms;">THIS IS A TEST</span></h3>
<p class="text-4 text-color-light font-weight-light text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">EXPERTS IN WEB DESIGN AND DEVELOPMENT</p>
										</div>
									</div>
								</Div>
							</div>
						</div>

---

[Support]

Hello, first thanks for your purchase.

You should increase the column size where’s the texts. Try changing <div class="col-lg-6"> to:

..
....
........
<div class="col-lg-12">
    .....
    ........   
    ......
</div>
..
....
......

* Learn more about columns here:
https://getbootstrap.com/docs/4.5/layout/grid/

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts