There are many different solutions to repositioning elements using CSS. This snippet uses one solution: position:relative/top/left which allows you to move the element in relation to it’s usual position. However, it does not provide a fully responsive solution and will need further @media code to make adjustments for different devices.
Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF Move the Slider Titles/Button with CSS */
/* Example move to bottom-left */
.carousel-caption {
position: relative; /* relative | absolute */
top: 200px; /* top | bottom (0px is top of element) */
left: -15%; /* left | right (0% is left of element) */
}
/* END OF Move the Slider Titles/Button with CSS */
22 thoughts on “Move the Slider Titles/Button with CSS”
I want to change heading h1 to h3 on the home page. How can I do it?
URL – http://pycc-site.ru/
Hi Igor,
You might want to try a search in the forum : http://docs.presscustomizr.com/article/125-searching-customizr-theme-topics-in-the-wordpress-org-forum
( this question has been addressed several time in our forums 🙂 )
Cheers !
Hi Dave and Nick,
Thank you both for all of your hard work. I have recommended this theme to several already. My question is: I input this snippet into the custom CSS and it worked beautifully…. for the full sized screen and the partial sized screen. However, when it re-sizes to the mobile screen the text box is off the slider and not visible. How do I fix this?
-Ben
Here’s the updated code that fixed the issue;
.carousel-caption {
width: 60%;
vertical-align: bottom;
margin-left: 0%;
How do i move the text and bottom to the bottom left or right of the slider? The instructions at the top didn’t work. Thanks
I would like to move the caption just below the image, so the image goes unblocked. Thanks for your reply in advance.
Sorry for not responding sooner and for this standard reply:
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Hi, I copied and pasted this example into the editor page of my child theme and it didn’t have any affect.
I then put it into the css section of the main customizr edit page, and still nothing happened… can anyone please tell me what it is I’m doing wrong? Thanks
Hi Beth. It should work in the CustomCSS panel, or in a Child Theme style.css. If not, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Hi,
Sorry for my English … and thanks a lot for this Customizr theme, is really amazing !!
So, I have a question about the slider of the theme :
Is it possible to change the current ratio of the image size (currently 1170 x 500), by a ratio of 16/9, without cropping images?
thanks for your reply.
Hi, did you check those snippets? http://www.presscustomizr.com/snippet-target/slider/
Thanks for using the theme
Hi Nicolas,
Thanks a lot for your reply, I have seen yet those snippets, and I didn’t found the solution, I have been tried with “Reduce the height of the Slider”, and finally the pictures are cropped, or I have a big space between the slider and the header.
I know that the best way to use the slider in optimal mode, is to keep the ratio of 1170×500, but my question is, do you think in the near future, to make the use of the slider with a ratio of 16 / 9?
thank you for your reply.
Hi, you can already have a full control on the image sizes and cropping options in slider, there are specific filters to do it.
You might want to check this snippet :
http://www.presscustomizr.com/snippet/changing-default-image-sizes-customizr/
Hi Nicolas !!!
You’re my savior !!!
You’re the best !!!
Thanks a lot for all !!!
Customizr 4Ever !!!!
;-)) Happy it helped!
Is there a way to get the slider images themselves to respond to a click rather than having a Link button at all? It seems like a natural and cleaner presentation than a button parsed a top pretty slider image.
Hear hear. I have to agree with this, and I think it is the standard across the web.
That said . . . awesome theme, guys! Keep up the great work.
I will publish a snippet about that in the coming days.
Thanks for the feedback @Michael.
Greetings!
I totally agree with that and asked for the same feature on the Facebook page yesterday. Hope to hear from Nicolas soon. Thank you for the great work
I just tried to execute moving the slider titles/button per the instructions above (in the Custom CSS of my child theme), but nothing happened at all. Am I missing something?
Thanks so much for all your help in this awesome support forum!
Tom,
I just pasted the code snip and it worked just great (thanks, Dave!). As you probably know, you have to play with the pixels at the bottom.