bootstrap 3: carousel caption position to the right inside slide

My URL

On desktop - see the caption with the purple background - I need to move this to the right of the navigation dots.

My css:

.carousel-caption {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background:purple;
  max-width:300px;
}
phillystyle123Asked:
Who is Participating?
 
Marco GasiFreelancerCommented:
Sorry, I misunderstood your request: delete the margin-top : 250px of my previous comment (I believed you want reposition the p element).

To put the whole carousel-caption to the right set

margin-left: 420px;
0
 
Marco GasiFreelancerCommented:
In custom.css add a margin-top rule to this selector:

.carousel-caption p {
  background: none repeat scroll 0 0 #002b5e;
  font-size: 1em;
  margin-top: 250px;
  padding: 10px 20px;
}

Open in new window


Remember to change the markup you have to place the button

<div class="btn">READ MORE</div>

Open in new window

before the paragraph instead of placing it before as it i now otherwuse it will be moved down too.
0
 
phillystyle123Author Commented:
thanks for the help -still not working though:
http://udm.cjehost.com/index.php
.carousel-caption {
 position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  background:purple;
  max-width:300px;
 
}
.carousel-caption p {
  background: none repeat scroll 0 0 #002b5e;
  font-size: 1em;
  margin-top: 250px;
  padding: 10px 20px;
}
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Marco GasiFreelancerCommented:
The page is changed: have you changed something else?
0
 
phillystyle123Author Commented:
Perfecto! Thanks Marco
0
 
Marco GasiFreelancerCommented:
Glad to help you! :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.