How to center text in carousel

dcaccount · May 7, 2018, 7:01pm

Hello,
I have created a carousel made of a few slides and added a description for each slide.

I would like to automatically center the description of each slide in the middle of the carousel, at the same height as the arrows. Please check image.

As a workaround I have added some margin/paddling but there should be a more elegant and automatic way.

Can you please advise how to achieve this?

Thanks,
dan

Eldar · May 9, 2018, 11:36am

Hello Dan,

You can adjust the position of the caption text by clicking on carousel and changing the position in the sidebar.

dcaccount · May 9, 2018, 11:48am

Thanks Eldar!

dcaccount · May 9, 2020, 12:15pm

Hello,
I go back to this “old” question to ask if it possible to to adjust the position of the caption differently for desktop and phone view (in Blocs 2.6.5).

In phone view, it is so and I would like to center text:

I have tried everything, it is centered in desktop and tablet but not in phone.
What can I do?

Thanks,
Dan

dcaccount · May 10, 2020, 9:31am

Has anyone an idea? I have tried everything to center this text, please help!
Thanks,
dan

chrishsl · May 10, 2020, 9:43am

I don’t remember the possibilities with Blocs 2.6.5, but have you tried to add a class to your text with a bottom margin ?

PeteSharp · May 10, 2020, 10:52am

Hi @dcaccount,

I don’t have an active version of Blocs 2 (Which was bootstrap 3) on my current MacBook Pro.

You could try adding this code to the page header. (Untested my end, with exception to adding the styles in the Safari Inspector.). This should over-ride the bottom style and align the caption vertically for small breakpoints… but then it might not


<style>
@media (max-width: 767px) {
  .carousel-caption {
   top: 50%;
   transform: translateY(-50%);
   bottom: initial;
  }
}
</style>

dcaccount · May 10, 2020, 11:20am

Thanks @PeteSharp,
it is much better but not 100% centered. See below:

Is there a way to center it a bit better?
Thanks!
Dan

PeteSharp · May 10, 2020, 11:21am

Do you have any other css that you have added? Be helpful if you have a live link.

It could be padding-top. ?

dcaccount · May 10, 2020, 11:39am

It is still in my RPI webserver only in LAN, I have not uploaded it yet.

What does it mean, paddling-toIn the custom class of the ext there is no paddling

PeteSharp · May 10, 2020, 11:50am

Ok, as a test, add a style to the CSS I posted above.

padding-top: 0px;

dcaccount · May 10, 2020, 11:57am

It works!!! Thanks, what is the issue I missed? What mistake have I made?
Thanks