about homepage issue

1. how to setup the slide image with link in the homepage banner(slide images)?
2. Columns unequal height issue when browser is zoomed out (Menu / Slider / Product Layout):
I am facing an alignment issue on my homepage. I have a 3-column layout:

Left: Categories Menu

Middle: Image Slider

Right: Product Widget

At 100% browser zoom, all three columns align perfectly at the bottom. However, when I zoom out the browser (e.g., to 80% or 75%) or resize the window, the middle column (the slider) becomes significantly taller than the left and right columns, breaking the equal height layout.

The left and right columns shrink based on text/content size, but the middle slider scales differently, causing an uneven bottom.

How can I properly configure these columns or what Custom CSS should I apply so that all three blocks maintain a consistent, equal height regardless of browser zoom or scaling?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

01. If you are using Elementor or WPBakery, edit the slider element and go to the slider settings. You can set the slide image and add the URL in the link option to make the whole slide clickable.

See Screenshot for better understanding: https://postimg.cc/w1PKFK40

If you are using the Gutenberg editor, edit the homepage directly and open the slider block settings. Please note that the Gutenberg Slider does not have a built-in option to make the entire slide clickable. You can only add links to individual elements inside the slide, such as an image, button, or text.

02. Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details of the site in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

already attached, please help to resolve as soon as possible

Hello,

I checked your layout, and the issue is related to the Slider Height setting.

Currently, the slider height is set to Image, which means the slider height is calculated based on the image’s original aspect ratio. When the browser zoom level changes or the screen width changes, the slider can scale differently compared to the other columns, causing the unequal height issue.

Please edit your slider settings and change the Height option from Image to custom Height — set a fixed height that matches your other columns.

See the screenshot for better understanding:https://postimg.cc/Jy0WwcHD

After changing this setting, clear the cache and check the layout again.

Best Regards

Thanks for your help. However, when I apply these settings, the image loses its original size on the mobile view.
How can I set different heights for desktop, tablet, and mobile devices?

Hello,

You can set different slider heights for each device using the responsive settings.

Please click on the Responsive Settings option next to the Slider Height field and configure separate heights for desktop, tablet, and mobile.

Set the desired height for the mobile view to maintain the correct image appearance on smaller screens.

See the screenshot for better understanding:
https://postimg.cc/8FG4rfYJ

Best Regards

[Author]

Posts