Slider - How to make the media content image and badge larger on mobile?

Ask the Community Customization
1

Hi. I am making a slider. It’s all perfect in desktop view. I am needing to make two things larger for mobile view.

I need the badge text to be larger in mobile view
AND
I need the media image (not the slide image) to be quite a bit larger. It’s pretty small in mobile view.

Any help is greatly appreciated!

  • Link to the page with the widget in question:
2

I am having issues with a slider I created. It looks great on desktop view (no apparent extra padding). On mobile view, I am having issues. There is a lot of extra padding above the widget. Attached is what I am referring to. I have added the code Elfsight recommends to add with the embedded widget code. It did not change anything. I also made sure that my website itself does not have any extra padding, even taking it all the way to 0 to be sure, and it doesn’t.

photo (1)
photo (1)1125×2436 200 KB

I use Brine 7.0 template as a reference.

Please help! I am so close to being super obsessed with Elfsight. I am just having issues with mobile views and fixing them without custom css which is a bit frustrating.

4

Hi @user3965 and welcome to Elfsight Community :wave:

Sure, we’ll be happy to help! I’ve checked your website (https://www.angieandbritt.com/) and, unfortunately, couldn’t find the widget on he homepage. Could you please share a direct link to the page where it’s installed?

5

As for now, our devs provided me with a CSS code to increase the size of media image and badge text.

@media screen and (max-width: 440px) {

.eapp-slider-badge-component {
  font-size: 20px;
}
.eapp-slider-media-container {
  scale: 1.5
}
}

Please add this CSS code to the Custom CSS field on the Advanced tab and let me know if it helped :slightly_smiling_face:

6

Ahhh, you’re a lifesaver! It worked perfectly. Thank you so much! :slight_smile:

7

Thank you sooo much for your kind feedback :heart:

If you still need our assistance with extra padding removal, just send us a link to the page where you widget is installed. We’ll gladly help :slightly_smiling_face: