Changed slider text, now it is not centered across each slide

Highlighted
New Contributor

I am just trying to update the text in our home page slider. Can someone tell me why the text is not uniformly centered across the different slides? HTML+HUBL Code:

 

<div id="slider-carousel2" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-interval="10000">

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<img src="https://cdn2.hubspot.net/hubfs/707095/phynd_flob_staging/assets/images/slider/slider.png" alt="slider">-->
<div class="row">
<div class="container">
<div class="col-md-4 "></div>
<div class="col-md-8">
<div class="carousel-caption caption1">
<h3>Phynd’s SaaS solution gives your health system a 360° view of your providers</h3>
<ul>
<li>Who they are</li>
<li>Where they work</li>
<li>What their expertise is</li>
<li>What networks they serve</li>
</ul>
<div class="btn-action video-btn btn-x col-md-8 slider_video" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-sm-9 col-xs-10"> <a href="javascript&colon;void(0);"> Drive an effective Go-To-Market strategy for your provider network</a> </div>
<div class="col-sm-3 col-xs-2 right"> <i class="fa fa-play-circle"></i> </div>
</div>
</div>
</div></div></div></div>
</div>

<div class="item">
<!--<img src="https://cdn2.hubspot.net/hubfs/707095/phynd_flob_staging/assets/images/slider/slider.png" alt="slider">-->
<div class="row">
<div class="container">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="carousel-caption caption2">
<h3>Learn how Phynd enables Go-to-Market solutions for:</h3>
<ul>
<li>Provider Enrollment</li>
<li>Provider Management</li>
<li>Provider Search</li>
<li>Provider Reporting</li>
</ul>
<div class="btn-action video-btn slide3-space btn-y col-md-8 slider_video" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-sm-9 col-xs-10"> <a href="javascript&colon;void(0);"> Drive an effective Go-To-Market strategy for your provider network</a> </div>
<div class="col-sm-3 col-xs-2 right"> <i class="fa fa-play-circle"></i> </div>
</div>
</div>
</div></div></div></div>
</div>

<div class="item">
<!--<img src="https://cdn2.hubspot.net/hubfs/707095/phynd_flob_staging/assets/images/slider/slider.png" alt="slider">-->
<div class="row">
<div class="container">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="carousel-caption caption3">
<h3>Maximize ROI with a best-in-class provider information management system, supporting:</h3>
<ul>
<li>Care Coordination</li>
<li>Patient Marketing</li>
<li>Patient Access</li>
<li>Revenue Cycle</li>
</ul>
<div class="btn-action video-btn btn-z col-md-8 slider_video" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-sm-9 col-xs-10"> <a href="javascript&colon;void(0);">Learn your health system can maximize ROI with Phynd</a> </div>
<div class="col-sm-3 col-xs-2 right"> <i class="fa fa-play-circle"></i> </div>
</div>
</div>
</div></div></div></div>
</div>
</div>
<!--Slider Controller -->
<div href="#slider-carousel2" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
</span>
</div>
<div href="#slider-carousel2" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
</span>
</div>

</div>

<!--For Mobile View-->

<div id="slider-carousel" class="carousel slide hidden-md hidden-lg" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<img src="https://cdn2.hubspot.net/hubfs/707095/phynd_flob_staging/assets/images/slider/s1-mob.png" alt="slider">-->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<div class="carousel-caption">
<h3>Phynd’s SaaS solution gives your health system a 360° view of your providers</h3>
<ul>
<li>Who they are</li>
<li>Where they work</li>
<li>What their expertise is</li>
<li>What networks they serve</li>
</ul>
<div class="btn-action video-btn slider_video" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-sm-9 col-xs-9"> <a href="javascript&colon;void(0);"> Drive an effective Go-To-Market strategy for your provider network</a> </div>
<div class="col-sm-3 col-xs-3"> <i class="fa fa-play-circle"></i> </div>
</div>
</div>
</div></div></div>
</div>

<div class="item">
<!--<img src="https://cdn2.hubspot.net/hubfs/707095/phynd_flob_staging/assets/images/slider/s1-mob.png" alt="slider">-->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<div class="carousel-caption">
<h3>Learn how Phynd enables Go-to-Market solutions for:</h3>
<ul>
<li>Provider Enrollment</li>
<li>Provider Management</li>
<li>Provider Search</li>
<li>Provider Reporting</li>
</ul>
<div class="btn-action video-btn slider_video" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-sm-9 col-xs-9"> <a href="javascript&colon;void(0);"> Drive an effective Go-To-Market strategy for your provider network</a> </div>
<div class="col-sm-3 col-xs-3"> <i class="fa fa-play-circle"></i> </div>
</div>
</div>
</div></div></div>
</div>

<div class="item">
<!-- <img src="https://cdn2.hubspot.net/hubfs/707095/phynd_flob_staging/assets/images/slider/s1-mob.png" alt="slider">-->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<div class="carousel-caption">
<h3>Maximize ROI with a best-in-class provider information management system, supporting:</h3>
<ul>
<li>Care Coordination</li>
<li>Patient Marketing</li>
<li>Patient Access</li>
<li>Revenue Cycle</li>
</ul>
<div class="btn-action video-btn slider_video" data-toggle="modal" data-target="#myModal">
<div class="row">
<div class="col-sm-9 col-xs-9"> <a href="javascript&colon;void(0);"> Learn your health system can maximize ROI with Phynd</a> </div>
<div class="col-sm-3 col-xs-3"> <i class="fa fa-play-circle"></i> </div>
</div>
</div>
</div></div></div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#slider-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#slider-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

 

I didn't write this, I just went in and edited the text and added bullets on a couple sections. I don't have the developer availible. 

 

What do I need to change here to center the text/align the h3 headers as it cycles through the slider carousel. 

Any help would be appreciated.

Reply
0 Upvotes
1 Reply
Regular Advisor | Platinum Partner

@alexrector613,

do you have a preview link?

it could be a simple as 

.item h3{
  text-align: center
}
dennis
Reply
0 Upvotes