Hi there,

Thank you for your compliment!

1. To add some background behind the slide captions please add the following CSS to Appearance -> Customize -> Additional CSS:

@media (min-width: 992px) {
    .jumbotron.carousel .carousel-text {
        background: rgba(0,0,0,0.4);
        padding: 20px;
    }
}

2. Moving the captions to the bottom of the slide will be possible with the following CSS:

/* Move slide captions to bottom */
@media (min-width: 992px) {
    body.header-wide .jumbotron.carousel .carousel-text {
        -webkit-transform: translate(0%, -20%);
        transform: translate(0%, -20%);
    }
}

You can change the minus 20% value to your own needs.

Or if you want to display the captions below the slide image (like on mobile screen) use the following CSS instead:

/* Move slide captions below images */
@media (min-width: 992px) {
    .jumbotron.carousel .carousel-text {
        position: relative;
        padding: 50px 0;
    }
    body.header-wide .jumbotron.carousel .carousel-text {
        -webkit-transform: none;
        transform: none;
    }
}

3. The following CSS will center the topbar details on mobile:

@media (max-width: 992px) {
    .topbar {
        text-align: center;
    }
}

Hi there,

You're welcome!

From the attached screenshot I see that the website is not the website that's added as "related" to this ticket which is  http://somd.pltester.com. Can you provide me the correct url of the website we're talking about.

1. This will be possible by setting a fixed width to the caption element:

@media (min-width: 992px) {
    body .jumbotron.carousel .carousel-text {
        width: 600px!important;
        transform: translate(45%, -50%)!important;
    }
}

If you want to adjust this you can change the 600 value. Please note that you also need to change the 45 value to keep the element centered.

2. After reading this point and point 3 I don't understand what you're trying to achieve. Unfortunately you can't do both. Do you want to change the position of the texts more to the bottom of the image, or do you want to move the entire text caption element below the image (like on mobile screens)?

To change the position of the texts more to the bottom area of the image you can change the minus 50% value in the CSS from point 1, for example:

@media (min-width: 992px) {
    body .jumbotron.carousel .carousel-text {
        transform: translateX(45%) translateY(-20%)!important;
    }
}

3. But if you want to move the entire text caption element below the image you need to use this one instead:

@media (min-width: 992px) {
    body .jumbotron.carousel .carousel-text {
        position: relative!important;
        transform: translateX(45%) translateY(0%)!important;
    }
}

As described in point two you have to pick one of the two options, both is not going to work.

4. This is possible but requires a little bit of CSS to hide the button on mobile screens.

You can add the following shortcode to the content textarea of the slide:

[button href="tel:123456"] Tap to Call [/button]

Then you can add the following custom CSS to hide the button from desktop screens:

@media (min-width: 992px) {
    body .jumbotron.carousel a[href^="tel:"] {
        display: none!important;
    }
}

Hi there,

Unfortunately I didn't know that until I opened the attached screenshot. It is easier and more effective to provide custom CSS when I can inspect the code on the correct website. All the previous CSS I wrote in this ticket is based on the somd.pltester.com, but wm.pltester.com has a different header layout for example and that requires a different CSS selector to target the elements for the slider

1. Make the wording under the image for wm.pltester.com

@media (min-width: 992px) {
    .jumbotron.carousel .carousel-text.center {
        position: relative;
        padding: 50px 0;
        transform: translate(45%, 0%)!important;
    }
}

If you would like to remove the dark background behind the texts please also add:

.jumbotron .item { background: #fff; }
.jumbotron.carousel .carousel-text h1 { color: #464646; }

2. Make a transparent colored background behind the wording for somd.pltester.com (and reduce the transparent width)

@media (min-width: 992px) {
    body.header-wide .jumbotron.carousel .carousel-text {
        width: 600px!important;
        transform: translate(45%, -50%)!important;
        background: rgba(0,0,0,0.5);
        padding: 30px;
    }
}

Please let me know if that did the trick.

Hi there,

If you're sure that's all the CSS added to the Additional CSS panel of the customizer, please replace all with the following: 

@media (max-width: 992px) {
    .topbar {
        text-align: left;
    }
    .jumbotron.carousel .carousel-text.center {
        text-align: center;
    }
}
@media (min-width: 992px) {
    .jumbotron.carousel .carousel-text.center {
        position: relative;
        padding: 50px 0;
        transform: none!important;
        margin: 0 auto;
    }
}

This should center the caption below the slider images on mobile and desktop screens.

Please let me know if that fixed the issue.

Thank you.