Responsive Slider

[Jim_H]

1. Would like the button size to be more configurable. In the mobile view, it ignores the font adjuster and just sizes up as it wants. Huge button covers parts of images if your text on it is longer. Would be great if it could be positioned elsewhere, too. Mobile version settings should be more configurable generally.

2. When you put a link on an image, would like to be able to indicate it as such somehow. People don’t realize you can click on it.

[Max]

Hi @Jim_H

I totally agree that the full responsiveness would make our app more complete. We already have such a request in our Wishlist and I’ve moved your comment to the dedicated thread where we’ll post all the updates.

As for now, could you please share a screenshot with the place where you’d like to move the button? We’ll be happy to check if anything can be done

[Jim_H]

Thanks for replying.

I would pretty much need all of the fields independent of desktop for mobile view, as my company pictures include people. The text fields and buttons cover faces. If it was independent of the desktop positioning, that would be enough, but the two are controlled by one setting. You get one looking right, the other is messed up.

No matter how hard I tried, my mobile views look awful. Plus, the pictures don’t scale down for mobile. It would be perfect if it was just more configurable for each view. It’s just not usable for me with the limitations it has now.

I may try different pictures before giving up completely.

Jim

[Max]

Hi @Jim_H

Yeah, I got your point. We do understand that this functionality is really important for our app. We’ll try to implement support for the full responsiveness. All the updates will be posted here

I’ve checked your widget and see that the position of the faces is different on various slides, that’s why it is hard to come up with a custom solution for your use case.

Anyway, you can try to use this CSS code to change the position of the widget elements on mobile. Perhaps, you’ll be able to adjust it to your liking:

.eapp-slider-badge-container {
  text-align: left;
  margin: 10px 0;
}

.eapp-slider-title-component {
  margin: 10px 0;
}

.eapp-slider-text-component {
  margin: 10px 0;
  font-size: 13px;
}

.eapp-slider-button-styleOutline {
  margin: 10px 0;
}

You just need to add this code to the Custom CSS field on the Advanced tab of your widget’s settings.

[Jim_H]

Great, that might be helpful. Thank you.

If you’re interested in how it came out after many image changes and about a billion hours of work - lol… Please see my testing page at:

www.jhcomputerservices.ca/test-page

It looks good on the desktop, not so much on the mobile. But maybe with your code I can improve it.

Jim

[Max]

@Jim_H I guess your website looks awesome.

Hope you’ll be able to adjust the mobile version of your website to make it even more neat and attractive

[Jim_H]

Again, thanks for your help with this. I realize you have a lot of apps and requests to deal with.

This is meant to replace my static text/images on the front page. The images are, unfortunately, essential to the tech nature of my business. I think I’m not being completely reasonable either, as used as background on a mobile it’s impossible not to have text over faces. I really like the idea of it, as it makes for a more interesting and professional experience.

I’ll just add two more wishes. That each picture had an alt tag for SEO. Only the media picture seems to. Unless I missed it, or it’s not possible to do. Also, that the top banner field was full width capable of a phone screen.

Jim

[Max]

Sure, I’ve added these request to the Wishlist as well:

• Full width badge for mobile depending on the screen size

• Add alt tags for all images (not only for media)

You can keep tabs on it in the threads above

[Jim_H]

Thank you!

Jim

[BEVERLY]

Doesnt work for the button

[Max]

Hi there @BEVERLY

The button classes have been changed, that’s why the code didn’t work. Please try to use this code instead and let me know if it helped:

@media (max-width: 480px) {
  .eapp-slider-button-component {
    margin: 10px 0;
    text-align: right;
  }
}

[Max]

Great news

Now the Slider looks great both on desktop and mobile. We’ve introduced 3 new slide types and the Slide Builder option allows you to adjust the appearance of its elements on mobile and desktop independently:

.

In the Slide settings section, you can set spacing and padding for mobile and desktop:

Slide elements have their own mobile/desktop settings. In the screenshot below, you’ll see the size settings for the Button element:

This change is just a part of our major update. Check this post and find more details