Slider description

Resolved julesjunction
(@julesjunction)

11 years, 8 months ago

The words on the slider is overlaying the slide pictures a bit too much so I’d like to move the slider caption-title and caption-description to the bottom right hand side of the slider with the text right justified.

I have managed to move the slider caption box but can’t get the caption-title and caption-description to line up in the caption box.

How to do this using CSS?

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

Thread Starter

(@julesjunction)

I’ve tried the below CSS on the website which looks fine on a PC and can kinda get away with it landscape on a tablet but just doesn’t work on an ipad portrait layout.

I feel like I’m nearly there but can’t quite get there. Ideas anyone?

.slider-caption {
   background: none;
   position: absolute;
   top: 55%;
   left: 28%;
   width: 30%;
   color: #FFF;
   text-transform: uppercase;
   padding: 10px 0;
   text-align: center;
}

.slider-caption .caption-title {
   font-size: 24px;
   line-height: 30px;
   width: 30%;
   font-weight: bold;
   margin: 0 auto;
   font-family: 'Lato', sans-serif;
   font-weight: 300;
   margin-bottom: 15px;
   color: #FFF;
   background: #00F;
   padding-left: 10px;
   padding-right: 10px;
}

.slider-caption .caption-description {
   font-size: 18px;
   line-height: 24px;
   width: 30%;
   margin: 0 auto;
   font-family: 'Lato', sans-serif;
   font-weight: 300;
   color: #036;
   text-transform: none;
   background: #FFF;
   background: rgba(255, 255, 255, 0.7);
   padding-left: 10px;
   padding-right: 10px;
}

Thread Starter

julesjunction

(@julesjunction)

11 years, 8 months ago

This is what I’ve ended up with but could still do with some help on the tablet portrait layout.

.slider-caption {
background: none;
position: absolute;
top: 65%;
left: 20%;
width: 100%;
color: #FFF;
text-transform: uppercase;
padding: 25px 0;
text-align: center;
}

.slider-caption .caption-title {
font-size: 24px;
line-height: 30px;
width: 30%;
font-weight: bold;
margin: 0 auto;
font-family: 'Lato', sans-serif;
font-weight: 300;
margin-bottom: 15px;
color: #FFF;
background: #05A9C5;
background: rgba(5, 169, 197, 0.9);
padding-left: 10px;
padding-right: 10px;
}

.slider-caption .caption-description {
font-size: 15px;
line-height: 20px;
width: 30%;
margin: 0 auto;
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #036;
text-transform: none;
background: #FFF;
background: rgba(255, 255, 255, 0.7);
padding-left: 10px;
padding-right: 10px;
}

Theme Author

Access Keys

(@access-keys)

11 years, 7 months ago

well done.. for tablet portrait write the css inside
@media screen and (max-width:768px){
Your css here. it will take effect in the device width width less then or equal 768px
}

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

The topic ‘Slider description’ is closed to new replies.

Tags