I am currently trying to modify my Royal Slider plugin on Wordpress (http://dimsemenov.com/plugins/royal-slider/)
I am aiming to center the text on all the captions as well as make the caption width 100%
This is the code that is working:
<div class="rsContent">
{{image_tag}}
<div class="rsCaption">
<h3>{{title}}</h3>
<p>{{description}}</p>
</div>
{{thumbnail}}
{{html}}
{{animated_blocks}}
{{#link_url}}
<a class="rsLink" href="{{link_url}}">{{title}}</a>
{{/link_url}}
</div>
This is the part I really don't know about:
#rsCaption {
position: absolute;
text-align: center;
I am unsure of placement as well.
Any guidance / links would be great. I am a total newbie trying figure this stuff out slowly.
Firstly you have class="rsCaption" and your css says #rsCaption which is for ids. So your CSS should be something like this:
.rsContent {
position: relative;
/* rest of the code that already exists */
}
.rsContent .rsCaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
This is just a wild guess, depends on what you have at the moment. If I would see it somewhere in action that would be something else.
Related
I'm using a Wordpress block to embed a video, and I want to set a maximum height (in pixels) for the video. There doesn't seem to be a UI way of doing this. Using the "edit as HTML" button, I see the following code:
<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress">
<div class="wp-block-embed__wrapper">
https://videopress.com/v/STUFF?preloadContent=metadata
</div>
</figure>
What's the best way to add a max-height:320px to this code?
Are you trying to edit this block using Gutenberg?
Looking to this code I can think there is a CSS hierarchy problem, any online example to test CSS property on this?
Probably you need to handcraft a custom CSS to this problem, and set the height as the way you want.
There's a piece of CSS maybe can help you, I found it on a Gutenberg issue about this problem:
figure.wp-block-embed.is-type-video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /*16:9*/
}
figure.wp-block-embed.is-type-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I'm currently trying something out which i saw on another website.
Imagine many pictures at the same position at the bottom of the website. Now when you scroll up - it will scroll every picture one bye one up - when done you will get eventually to the footer.
I already tried position: sticky etc. but it did not worked as I wanted.
Can someone help me? I would be so happy!
.poster-middle {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-middle-img {
margin-top: 500px;
}
.poster-left {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-left-img {
margin-top: -700px;
}
.poster-right {
width: 100%;
height: 100%;
top: 0;
position:-webkit-sticky;
position:sticky;
}
.poster-right-img {
margin-top: -700px;
}
<div class="poster-middle"><div class="poster-middle-img"><img src="img/1.jpg"></div></div>
<div class="poster-left"><div class="poster-left-img"><img src="img/2.jpg"></div></div>
<div class="poster-right"><div class="poster-right-img"><img src="img/3.jpg"></div></div>
right now everything is scrolling up together
You can achive this with pure css.
The trick is to use the sticky attribute of the position property and define the bottom property. This way all images are sticking to the bottom of the page. If the value of the bottom property is less than the image height, the top of all the images are visible all the time. The images below the first one are outside of view (technically) but will be visible because of the sticky attribute. Margin-bottom defines the margin between the images.
When the user starts scrolling, one image after the other is scolling into the view and is released from the position at the bottom and will scroll freely to the top.
position: -webkit-sticky;
position: sticky;
bottom: -200px;
margin-bottom: 300px;
The rest is normal positioning.
I created a little fiddle to show a full example. You can build your solution from there very easily.
I said CSS only, but used javascript in the fiddle. The code is only to give all elements a z-index. You can do this when generating the page or with nth-child in the css. But I didn't want to do that. Call it laziness ;)
You can use jquery to do this
var src = ['url_image1.jpg', 'url_imafe2.jpg'];. // Array of source of images
var i = 0;
$(document).ready(function() {
$(window).bind('mousewheel',function() {
$('#imgs').hide().delay(1000).fadeIn();
if (i==1){
$('#imgs').attr('src', src[i]);
i=0;
}
else {
$('#imgs').attr('src', src[i]);
i=1;
}
});
});
<style>
div{height:500px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="imgs" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
</div>
I’m trying to make the text contain to the image. I have it working perfectly for desktop and tablet, but I’m having a hard time with mobile. I have made it slightly better than it was but can’t think of what I’m overlooking.
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
display: block;
bottom: 0;
right: 0;
left: 0;
color: white;
padding: 0px 40px 0;
opacity: 0.;
}
Heres an image of how it looks :
Tablet :
Desktop :
<div class="container">
<img src="uploads/2018/09/App-Design.jpg" alt="App Design">
<div class="text-block">
<h6>App Design and Development </h6>
<p>We design and develop iPhone and Android apps for startups and enterprises that are fully compatible with your daily operational activities.</p>
</div>
</div>
Just to clarify, you're wanting to make the text for each section sit inside their respective images, and not let any text sit outside its image?
If so, use overflow: hidden; to hide all content that doesn't fit inside the image.
If I've misunderstood your problem, my apologies and would you be able to explain further?
Hope this helps!
I think you need to set height of each container in mobile size,
for example,
#media only screen and (max-width:480px){
.container {
position: relative;
height: 300px;
/* or */
min-height: 300px;
}
}
This is where im at now i feel closer but its not quite inside the box the title are still overlapping a little [Mobile view][1] https://ibb.co/dMfXez
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
Color: white;
padding: 5px 10px 0;
position: absolute;
bottom: 0;
left: 50;
opacity: 0.;
}
Is there away i can just make it so the description dissapears on mobile view and the title just stays there? but then the description is there on PC and Tablet mode?
I have a quick question regarding some CSS work on my website. I need help with putting some text on top of my image slider (www.ininkk.com) just like how it looks on the page banner here: http://www.instacool.com.au/white-ink-printing/ (where it says "white ink printing"). Any help would be greatly appreciated. Thank you!
ok you have to put the text position to absolute , something like this :
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Here's a quick codepen, need some styling but should get you started:
http://codepen.io/nilestanner/pen/LkoEZz
<div class="img-bg">
<h2>some text</h2>
</div>
h2{
padding:100px;
}
.img-bg{
background:url('http://nilestanner.com/codepen/expanding-hover-tabs/vista-1.jpg');
height:500px;
}
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}