Move the Slider Titles/Button with CSS

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

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 */

 

Leave a Reply to Aaron Cancel reply

Your email address will not be published. Required fields are marked *

22 thoughts on “Move the Slider Titles/Button with CSS”