[lrdgsn]

Is there a way to get the slider controllers (dots) and the slide title to appear under the slider instead of on the actual slides?

Thank you

[lrdgsn]

I got the dots to move under slider but can’t figure out what I need to do to get the slide title under the slider (to the right of dots). Thanks

[lrdgsn]

Also, I want the controllers (dots) to be on the left side, how do I do that? Also, I need it to be responsive and on my phone the title is over the dots.

http://development.laurastokesartsales.com/

[Mahesh]

@lrdgsn: Go to Dashboard=> Appearance=> Customize=> Appearance=> Theme Options=> Custom CSS box and add the following CSS:

#controllers {
    text-align: left;
    left: 15%;
}
  
@media screen and (max-width: 910px) {
    #controllers {
        left: 0;
    }
}

Hope this helps. Let me know if any problem.

Regards,
Mahesh

[lrdgsn]

That worked perfect!

But, I realized what I did to get slide titles to the bottom right (directly across from dots) is not responsive.

Can you please tell me what I need to do to get the slide titles below the slide on bottom right and be in line with dots and responsive?
Thanks!!

[Mahesh]

@lrdgsn: For that you can use following CSS to decrease the font size.

@media screen and (max-width: 480px) {
    #main-slider .entry-header .entry-title {
        font-size: 12px;
    }
}

Regards,
Mahesh

[lrdgsn]

It’s still moving around and not staying. Maybe I have the code wrong to get the title to appear in the lower right. Maybe you can tell me the easier way to get the title in the lower right and stay responsive. Here’s what I have:

/* Slider title/text area */
#main-slider .entry-container {
padding-bottom: 40px;
bottom: auto;
width: 78%;
font-style: italic;
padding: 1em 1em;
padding: 1rem 1rem;
}

#main-slider { padding-bottom: 40px; }

#header .entry-header { padding-bottom: 40px; }

[Mahesh]

@lrdgsn: The above CSS I’ve provided you should have resolved the issue. Isn’t the text staying to the right in the single line right next to the slider buttons?
On which screen size are you checking? Let me know further.

Regards,
Mahesh

[lrdgsn]

Actually it looks fine on my phone but on different computer screen sizes, it moves the dots and title towards the middle, see screenshots:

https://snag.gy/83PQSO.jpg
https://snag.gy/2tzY4r.jpg

How do I make it so the dots stay to the left and the title stays to the right?

On my large screen it looks good (https://snag.gy/k4593F.jpg) but I want it to be in this position on all screens.

Thanks for the help!!

[lrdgsn]

Also, here it is on my macbook: https://snag.gy/RYOZQX.jpg

[Mahesh]

@lrdgsn: This is a bit tricky to make the dots align to the left on all sizes as it automatically adjusts the position. Can you please specify the screen size that you’ve tested in the above images. Then I can provide you the CSS for those.

Regards,
Mahesh

[lrdgsn]

The laptop screenshot I sent was on a 13″ macbook

Thanks

[Mahesh]

@lrdgsn: Sorry for the confusion, but by screen size I mean the screen resolution (like 800X600).
Let me know further.

Regards,
Mahesh

[Author]

Posts