Center text in LayerSlider

Support
#1

Hola rock stars!

My LayerSlider settings are centered both vertically and horizontally in the slider settings, as far as I can see. Could you please tell me how I center it on mobile view as well?

<3

https://cafeekudden.se/pa-gang/

#2

Hi There,

Thank you for writing in, please make sure you position your layer to middle center

screenshot

If nothing works, please provide us login credentials in “Secure Note” so we can take a look on your configuration.

Cheers!

#3

Hola!

Yep, the layer is middle center just like that. It works on bigger screens but not on mobile. Some weird setting must be wrong.

Please tell me how to center the text both vertically and horizontally in that layer slider called index slider on mobile view. I can’t figure out how to make more bottom padding for the text in mobile view.

<3

#4

Hey,

To have sure if it`s causing by a custom CSS code, can you remove your custom codes and check this again? If nothing code is causing it, you can try to add width: 100% in the layer.

#5

I’m pretty sure it has something to do with formatting of headlines, as they are tagged h2 and h6. The problem is that I don’t know how to solve it. I’ve been editing css for about 5-6 hours trying to figure this one out. Maybe you can see it quicker?

<3

#6

Hi There,

I think the issue here is that the Text (PĂĄG) stops being responsive at 45px while the slider itself continues to shrink, would you mind adding a CLASS to your Text (PĂĄG) and then add this on your custom CSS

@media (max-width: 480px) {
	h2.my-class span {
		font-size: 30px !important;
	}
}

Replace the my-class with the actual class that you applied.

Thanks,

#7

Thanx, but the size of the H2 is how I want it. I don’t want it smaller on mobile. I do however want it centered. It is pushed to the right on all screen sizes - you just see it better on mobile.

I would also like for the H2 not to get cut off in the bottom. Please see attached images.

Also, I’m not sure how to add a class to that HTML, seen in image.

<3

#8

Hello There,

The element is already at the center. The only problem is that the contents of the element is displayed outside of bounds of the container. To resolve this issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

html .ls-wrapper > h2, body .ls-wrapper > h2, 
#ls-global .ls-wrapper > h2 {
    left: 50% !important;
    margin-left: -35px !important;
}

Hope this helps. Please let us know how it goes.

1 Like
#9

Thank you! Your code works. I still can’t get the title to center vertically on desktop (suggestions are welcome) but it’s better now than before.

<3

#10

Hi again,

Please add the following code in your Customizer as well:

.blog .ls-parallax, .blog .ls-in-out, .blog .ls-z {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: auto !important;
}
.blog .ls-wrapper.ls-in-out hr {
    display: none !important;
}
.blog .ls-wrapper.ls-in-out * {
    height: auto !important;
}

Hope this helps!

1 Like
#11

NICE! Finally! Thank you very much @Nabeel!

<3

#12

Glad we could help.

Cheers!