CODEWITHSUNDEEP
cssjssor
taher
taher

Reputation: 549

Padding issue in jssor slider captions

I used padding in captions of jssor slider but I saw that it cause issues in captions and content of some of captions does not show correctly.
This is the code that I applied padding. 

.captionOrange, .captionBlack {
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
padding: 20px;
}

I used this code in introduction-slider.source.html inside demos-jquery.
When I use position: relative; for captions it fix above issue but it ignores top css property and did not use top of caption parent.
This is an image of issue.
enter image description here

Update:
There is an slider on top of below link and it's my mean. Please inspect one of captions in it and you can see a css rule .captionOrange, .captionBlue, .captionBlack, .captionSymbol so please add padding: 20px to it to see result. When you add padding: 20px it will cut some of captions content.
jssor slider introduction theme

Upvotes: 1

Views: 394

Answers (1)

zer00ne
zer00ne

Reputation: 44088

Ok, I see the reason why moving the captions get you those results. I looked at the top left one called .captionOrange:

<div u="caption" t="CLIP|LR" du="1500" class="captionOrange" style="position: absolute; left: 20px; top: 30px; width: 500px; height: 30px; clip: rect(0px 500px 30px 0px);"> 
Touch swipe and responsive javascript image slider
</div>

At the end of this tag notice the following part:

clip: rect(0px 500px 30px 0px);

This is a clip rectangle 500px wide and 30px tall (height), increase the 30px to whatever you want and you'll have more room for text. See this article for details on the clip property. Basically the clip property will create a window that determines what is visible within an element.

Upvotes: 1

Related Questions