Center table text horizontally in carousel
-
Hi!
I added a table text (because I need a 2 columns layout) in a carousel but I can't center it horizontally. It always shows up aligned to left.
I've also tried with CSS but can't find a way to make it work.
Is there any way to solve this problem?Thanks in advance!!
-
Dear @aheneah
Some first steps if you could please :)
You have set the Table in the middle of your Gridder Layout?
When creating the table in the 'text' element you could highlight the Table and set to 'align-center' like you would with normal text.
Could you post a link to the website in question? :)
Talk soon & have a wonderful day!
Richard
-
Dear Richard,
Sorry for my late reply. My website is unavailable since it's under construction, so I had to find another way to share with you an example.
Please check this link.
I've tried with the table basic edits but it also doesn't work.
I would be really grateful if you could help me find a solution to have two text columns centered in a carousel.
Have a great day,
Ana -
Dear Ana @aheneah
Unsure of your exact setup so i hope that just adding this code will do for you :)
Add the following Code into the Custom CSS area of 'Lay Options - Custom CSS & HTML'
table.aligncenter { margin-left: auto; margin-right: auto; }
Hope this helps :)
Richard -
Dear Richard,
It worked perfectly! How easy... Thank you so much!
In the same topic, I would need to make these carousel texts possible to choose and copy like texts normally and disable "next" navigation on hover. Is there any way to do it?
Once again, thank you!
Best,
Ana -
Dear Ana @aheneah
Just to make sure - you are unable to highlight the text because its set to 'slide' so any clicking action will 'grab' the slide.
Make sure in Lay options > Carousel Addon > that transition type is not on slide and any other options are set how you wish.
Let me know how you go! :)
Best
Richard -
Dear Richard,
Thanks for your answer!
I've set the transition type to "none" and I still can't highlight the text.
Seems like the carousel arrows are stacked above the slide texts and any click you make will always direct you to the next/previous slide. Is there any CSS code to limit the arrows "area" to the screen edges?Once again, thanks for your tips!
Best,
Ana -
Dear Ana @aheneah
Unfortunately the whole 'slide' has the 'click event' - To describe it like a 'Glass Window' over the carousel. anywhere you click will be on this window (triggering the slide).
With the Current Lay Theme options you cannot select/highlight the text - sorry about this and any inconvenience it may cause to your design.
It is likely possible with some further Coding/hacking - I wanted to give this a go for you as a solution:
https://stackoverflow.com/questions/53367064/how-to-enable-select-text-in-swiper-jsBut it hasn't worked. I cannot go in further at the moment to get this to work sadly.
Once again sorry if cannot help further Ana - You may wish to seek the aid of a developer if you know someone who could lend a hand- - Or any others reading this Thread if that could Help Ana please :)
Have a lovely day Ana & best wishes
Sincerely
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it