Link to home
Start Free TrialLog in
Avatar of phillystyle123
phillystyle123Flag for United States of America

asked on

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;
}
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

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.
Avatar of phillystyle123

ASKER

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;
}
The page is changed: have you changed something else?
ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Perfecto! Thanks Marco
Glad to help you! :-)