Tweaking the posts carousel as a slider on mobile

Beaver Builder
1

It is a couple of tweaks on the slider on mobile. When using a slider to make a post carousel, on mobile the text don’t show over the image, but it shows underneath. I don’t like that it doesn’t look centered into the background, could I do something to get it centered?

Here is the slider I am talking about:
http://postimg.org/image/gw0cpf4a7/

And the page is:
http://en.thecrazytravel.com/

As well, I want the text of the posts black, so I need to have to set up the links on that color, there would be an option to set the arrows color independently somehow? So I can put them in white to make them more visible.

Thanks!

2

Hi Pablo,

Unfortunately, the Post Slider text will appear beneath the image on mobile devices and this is by design. If you do not like this functionality, please post your suggestion on our UserVoice.

https://wpbeaverbuilder.uservoice.com/

In regards to your image, I am not entirely sure what you’re referring to. As you’re highlighting the Icon Group module, but you do not mention that module in your post?

For you other question related to the color of your links/arrows. Would it be possible for you to provide a screenshot of what you’re trying to achieve, please?

Thanks,
Danny

3

Oh, sorry, mistaken file.

I have no problem with the design of this module, but it has a problem if left on auto-scroll, because each post may have different height and the page might be moving up and down once you scroll down. So I had to disable any autoscroll.

The arrows I want to change the color of are the ones marked here, I want them white:
https://drive.google.com/file/d/0BwyXmadE98SnOHVJLTZSbXBvZWs/view?usp=sharing
And the text there for the title of the posts is the one that is not vertically aligned (or too much padding on the bottom).

4

Hi Pablo,

I haven’t encountered any issue with auto-scoll. Is it posible for you to record the issue so we can take a closer look, please?

In regards to changing the color of the arrows, you can use the following CSS.

.fl-node-56c0a038a7166 .fl-post-slider-navigation path {
    fill: #F00;
}

As for the text in the slider not being vertically aligned. This is due to some CSS for the module that is applying a margin-bottom of 20px. To override this add the following to your custom CSS.

.fl-post-slider-post .fl-post-slider-title {
    margin-top: 10px !important;
}

Thanks,
Danny

5

It looks more centered. Thanks.

The arrow issue wasn’t corrected. I have 2 sliders created, one for medium devices and one for small devices. I think the CSS is affecting somehow the medium devices instead of the small devices slider.

And, in medium devices it was already showing white, now it shows red.

I will try to record the auto-play issue, but you can see it in mobile just pressing the arrow (because autoplay is off now). When you press the arrow if the title is 3 lines it will take more screen space than the one with 2 lines… So it will move up and down the content underneath.

6

Hey Pablo,

Can you place a custom class to the slider on mobile, then add the CSS snippet below replacing fl-post-slider-mobile with your class?

.fl-post-slider-mobile .fl-post-slider .fl-post-slider-navigation path {
  fill: blue;
}

Re the slider, I’ve only used Rev Slider before and I know it behaves that way as well. I don’t think there is a way to reduce the size of the texts relative to the number of lines it’s using. We could make it so that the text is all on one line and hide the texts that go out of the container. Sample below.
http://imgur.com/pwUBApf

Ben

7

It works, I got the color changed. Thanks.

I was just mentioning the issue, but it is not a problem for me right now since I don’t think I want auto-scroll on the mobile version. :wink:

8

Awesome! Glad I could help! Enjoy! :slight_smile:

Ben