[Resolved] Change dimensions of Image Slider on Block Editor

[Author]

Posts

[belindaV]

Tell us what you are trying to do?
I have used an image slider on my content template and I resized the viewport window with CSS but it is not keeping it's ratio when the screen size is bigger or smaller. Is there a way to change the size of this view port / image slider so that it keeps it's ratio across all devices?

Is there any documentation that you are following?
No

Is there a similar example that we can see?
No

What is the link to your site?
hidden link

The site is behind a coming soon wall so I would need to provide some logins in a secure way.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

To suggest the best way to achieve this, I'll need to see how this image slider is set up in the admin area.

Can you please share temporary admin login details, in reply to this message?

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the access details.

I noticed that you've added the following custom CSS code in the template, which sets a fixed height for the slider images.

.tb-image-slider--crop .glide__slide img {
    -o-object-fit: cover;
    object-fit: cover;
    height: 400px !important;
}

This makes the slider images show in a uniform height, but as the original image dimensions are different, it changes the actual image proportions too, which can make them look distorted.

To avoid this, you can change the above code slightly, so that the images maintain their original dimensions while maintaining the same height, but it will mean that they'll not always cover the full available slider area width:

.tb-image-slider--crop .glide__slide img {
    -o-object-fit: contain;
    object-fit: contain;
    height: 400px !important;
}

I understand that you were originally looking for a solution to make slider images restricted to a certain proportion for all screen sizes. But, there is no built-in feature available for this, and you'll need some complex custom script to add fixed height to those images, with the changing screen width.

For more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/