Home Forums Porto Template Stop stars wrapping to next line

This topic contains 2 replies, has 2 voices, and was last updated by  JohnAlan 2 months ago. This post has been viewed 113 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10029353

    JohnAlan
    Participant

    I’m using this code below the homepage revolution slider (only text changes from the demo): –

    <div class="home-intro bg-dark" id="home-intro">
    	<div class="container">
    		<div class="row align-items-center">
    			<div class="col-lg-8">
    				<p>Reliable, trustworthy and with a <i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="150" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="300" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="450" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="600" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="750" data-appear-animation-duration="0.2s"></i> customer service record
    				<span>Striving to deliver the highest quality of service.</span>
    				</p>
    			</div>
    			<div class="col-lg-4">
    				<div class="get-started text-left text-lg-right">
    					<a href="contact" class="btn btn-tertiary btn-lg text-3 font-weight-semibold px-4 py-3">Get A Quote</a>
    					<div class="learn-more">or <a href="the-company">learn more.</a></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    which is fine, but on smaller devices the stars sometimes wrap mid-stars to the next line, e.g.: –

    Stars wrapping to next line

    Is it possible to force the stars to start on the 2nd line in these case, i.e. instead of: –

    Reliable, trustworthy and with a **
    *** customer service record

    have: –

    Reliable, trustworthy and with a
    ***** customer service record

    ?



    Template Version: 7.3.0
    #10029357

    Support2
    Keymaster

    Hello,

    This is possible. Just wrap the stars into a <span class="d-inline-block">...</span>:

    <span class="d-inline-block"><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="150" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="300" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="450" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="600" data-appear-animation-duration="0.2s"></i><i class="fas fa-star text-2 staryellow appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="750" data-appear-animation-duration="0.2s"></i></span>

    Kind Regards,

    Rodrigo.


    #10029393

    JohnAlan
    Participant

    Great, thanks again!


Viewing 3 posts - 1 through 3 (of 3 total)