Adjust image and video ratio

Ask the Community Customization
1

Need to add an image and video slider to showcase vertically (portrait 9:16)) content on the website.

2 Likes
3

Hi there, @Marketing_Ops :wave:

You can set the needed dimensions using the Width and Height settings on the Settings tab:

image
image335×988 15.3 KB


Please let me know if this option works for you or if you have any questions left :slightly_smiling_face:

1 Like
4

It does help adjust the video. Can we also have multiple columns within the slider to show two or more content simultaneously?

1 Like
5

Hi @Marketing_Ops :wave:

Could you please specify the name of the Slider widget, where you’d like to add the 2nd column? Also, please describe which elements you’d like to add to the 2nd column :slightly_smiling_face:

6

Using the one here as example - Elfsight

Can we create another with multiple columns in the slider carousel with 9:16 content?

1 Like
7

I’ve talked to the devs and, unfortunately, it’s impossible to customize the widget this way.

However, this is a great idea, and I’ve added it to the Wishlist on your behalf - Carousel layout

8

Hi Max,

To confirm, the width is the same on mobile, tablet and desktop? Or, is there a setting way to adjust the width for each? Or, will that require a custom CSS code? Also, is there a setting to adjust the height on a tablet? Or, will that require a custom CSS code?

-mw

1 Like
9

Hi there, @Master_Web :waving_hand:

Yep, it can be done with the CSS codes. Here are the codes to change the width of the widget:

Mobile

@media (max-width: 500px) {
[class*="WidgetBackground__Container"] {
  width: 100px;
}
}

Tablet

@media (min-width: 501px) and (max-width: 1024px) {
    [class*="WidgetBackground__Container"] {
        width: 200px;
    }
}

As for the height on tablets, I’ve asked the devs to share a code. I’ll update you once I hear back from them :slightly_smiling_face:

2 Likes
10

Thank you Max.

-mw

1 Like
11

Hi @Master_Web :waving_hand:

Thank you for waiting!

Here is the CSS code to change the widget’s height on tablets:

@media (min-width: 480px) and (max-width: 768px) {
  .eapp-slider-slider-slider {
    height: 600px;
  }
}

Give it a try and let me know how it worked :wink:

1 Like