Parallax Slider on Mobile

I use the bootstrap rather than Parallax slider but I was able to get text & buttons where I wanted for various screen sizes through custom CSS.

You just need to style things a little differently for each screen size — these are the conventions being used for styling in the parent theme:

– Responsive Dynamic Definitions
— Min-Width 992px – Desktop
— Max-Width 782px – For Admin Bar
— Min-Width 768px – Tablet
— Max-Width 767.98px – Landscape Phone
— Max-Width 575.98px – Small Phone

I’d recommend sticking with those conventions and then fiddle with text size & positioning for each version until you get things the way you’d like.

holy crap that’s a lot of work!

Not really – you really should be fine with just phone & tablet.

One issue on your site is that some of your slider images have text as part of the image itself — I think that makes things tough — you might want to review the images in your slider and then pick whichever one is the trickiest to be the one you will design around.

Keep in mind that you can also add a background to the slider text to improve legibility.

But seriously, you might just find it easier to edit some of those images. The problem with your image on the left isn’t the slider, it’s the text that is centered on the left side of the image itself. Where could you possibly put text that it wouldn’t overlay that?

Alternatively, since the image text and the slide text for that particular image essentially say the same thing, you could just leave that particular slide with no text (or go the display:none route for the title text for that size range, if you are happy with placement in desktop mode)

• This reply was modified 6 years, 4 months ago by Abigailm.

Since the slider text rides on top of the image, adding background color or whatever to the slider text won’t resolve the issue. This one is Romik’s issue. The text should not be on top of the image on mobile. It should be above it or something…something needs to change. What’s the URL to yours…I would like to see what bootstrap slider looks like. There was a reason I didn’t use it in the beginning, but that was 2 1/2 years ago now, I don’t remember why anymore, just that there was one.

he really needs to fix the theme. If I have to fix everything with CSS, that’s not working for me. It needs to be coded to work correctly on mobile, if he’s advertising a responsive mobile theme. Just my opinion.

CSS is for “fine-tuning” …not for making thing work that are broken in the theme. (unless something of mine broke it somehow)

too tired tonight to mess with it.

I don’t have problem with text on top of the image in mobile, but I have different images & less text in the title. Here’s a link to what my slider images look like in the smallest mobile view:

https://unsee.cc/79baddb7/

I understand your frustration …and my layout is not the default bootstrap. I’ve had to change it 3 or 4 times over the years because of changes Romik has pushed out.

So I’m not debating about the hassle. It’s just that I personally don’t have a problem with the overlay of the text.

Maybe I can add an option where user can set the position of the text in smaller screen sizes + a color background ??

That would be great and for bootstrap also. Thank u romik

Abigail, you don’t have a problem because 1) your image has no text, 2) your image has no blending of dark & light colors that makes text on top it unworkable, but irregardless, the text is still on top of the image, and it should not be.

I personally think since the slider is full width, and you can not practically ‘shrink’ a desktop full width page – anything to make it look right on a mobile phone size (because it would just be too small), that it should split differently on mobile, (unless it was originally designed that way, i.e. ‘layers’ slider ) text should be either on top or beneath the image, or have the option to remove it entirely, …but that’s just my opinion. That’s how I’ve seen it most of the time there are split text/image sliders.

maybe not the same kind of sliders, but examples from around the web:
https://www.converse.com/uk

Well I looked for more, but I guess that style of slider is not as popular as it used to be. …but you get my point. I like sliders that have layers, but this is not that kind of slider, right? I actually own Revolution slider on my own site…does cool stuff. This is just a simple one…

But that’s what I said in the first place— your problem is because there is text within your images … so it really makes no sense to me to add more text on top of that. Just as a general design consideration, if you are going to have sliders with text that resize, you are going to have to choose appropriate images to start with. Best to keep things simple & also keep color backgrounds (light vs. dark) consistent within a slider set.

@romik84 — I think that the more options you can add via customization to adjust & change text & buttons depending on screen size, the better — but that’s a lot of work for you! I’m actually thinking of removing the slider entirely for the small phone version-so an option to simply disable the slider for small screens might also be helpful down the line. It is tricky to line up elements like text as the underlying image is resized.

Another problem I ran into with the bootstrap slider is the default placement of the button below the text — for me that pushes text up too high on the image, so I set styles to move the elements around, but that involved coding in negative margin values which created its own set of additional layout problems. It would have been nice if I could have simply had a different option for button placement in the first place.

doesn’t really matter. It wasn’t designed as “layers” …if it were, I would have chose a different image to begin with. But it wasn’t, it was 2 different sections/divs. Just because I happen to be the one that brought it up, how do you know no one else has the same issue? It’s not just text that causes an issue is what I was saying…any image, an image with a lot of contrasting dark and light colors also can not have text on top of it…design-wise, and look decent anyway.

I’m not saying that others don’t have your issue — just that others (including me) would not necessarily want the change you are suggesting, of having the text moved to above or below the slider image. So fine if it’s an added option – the more options the better- but not something that I think should be built in as a default behavior.

Well not to start anything, but to just discuss civilly, what you are suggesting is not a typical desktop to mobile conversion method.

1. if it’s full width, shrink it
2. if they are different sections, stack them. …that’s just the way things are done. You can’t just decide to layer things that weren’t originally created layers, just because someone wants it that way.

…in my opinion

I guess one of us will have to live with whatever Romik decides…it’S his theme.

I don’t know about the Parallax slider but the Bootstrap slider has always had the text as an element within the slider <div>, not as a separate stackable element.

The new version actually resizes for me better than than the old version… mostly because I hadn’t taken the time to fix the old version. There are multiple annoyances in the way the coding & elements have changed, which in turn messed up my customizations – but both old and new carried the text elements within the same larger <div> as the image, with text elements as a sub div.

But perhaps that is just a change in the Parallax. If that’s the case… I get it. You would want an option you had before restored.

• This reply was modified 6 years, 3 months ago by Abigailm.

I only use it on this site with this theme because it was in the theme. For some reason the bootstrap didn’t do something I wanted at the time, I don’t remember. But I have revolution slider on my site, and there is no comparison, imo. But the thing ain’t cheap/free either…not obtaining, or running it. But it sure does some awesome stuff.