Blog Carousel Vertical Alignment Issue

  • Resolved lospeso

    (@lospeso)


    3 years, 3 months ago

    I have two blog carousel widgets beside each other.

    One carousel is set to show a specific category, (i.e. Category-1), the one at its right is set to show a different category (i.e. Category-2).

    The problem is the both show to be vertically offset from each other. One is higher than the other.

    When in the Elementor editor, placing my cursor over each of them to reveal the light blue element border, the one on the left shows a height to be smaller (shorter) than the one on the right.

    See screenshot: https://prnt.sc/1mk95xp

    This misalignment occurs when using different categories between them. If they both used the same category, they would vertically align as the same, both with the same height. The moment I assign one of them a different category, the vertical alignment shifts, one height becomes shorter, as seen in the screenshot.

    — Switching Categories Between Them —
    I tested it further. I switched the category query between. The one on the left was changed to query “Category-2” and the one on the right, queries “Category-1”.

    The result was the one on the right now dropped below the left one, its height became shorter. Using the screenshot, just reverse them.

    This says the widget seems to be affected by a specific category, that causes it to realign and resize itself.

    I checked this using the browser developer mode and cannot find any CSS that affects it and both elements show to be the same height, so something is shifting their relative positions.

    — Standard Troubleshoot Test —
    – Turning off all other plugins, no change, same issue.
    – Switched to WordPress standard theme, twenty-nineteen, no change, same issue.
    – Creating a new blog carousel (not duplicating them), no change, same issue.
    – Width of the page or column makes no difference, same issue.

    Any idea what to do about this?

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Qode

    (@qodeinteractive)

    Hi Lospeso,

    We have tried this at our end and couldn’t reproduce the issue, but it may have to do with some settings you’ve selected. What have you been using as a layout and display options (show date/image/info)?

    You can also try enabling WP_DEBUG to see if there is some king of error.

    Regards,
    Qode

    Thread Starter lospeso

    (@lospeso)

    Sorry for not responding earlier, I never got the email notice to say you replied. :/

    — Blog Carousel Widget Settings —
    This is what I have been using:

    In the widget, Content > Layout section, the settings are:

    Item Layout: Boxed
    Title Tag: H2
    Show Excerpt: No
    Center Content: Yes
    Show Media: Default
    Show Info Icons: Yes
    Show date: No
    Show Category: No
    Show Author: No
    Show button: Yes

    There is no “display” options section, at least not named that way.
    If there is another section of this widget for me to check and let you know the setting, please let me know.

    — Debug Mode —
    I activated it.
    Nothing comes up.

    I even tried the “Health Check & Troubleshooting” plugin, nothing reported.

    — Note —
    Per the screenshot above, I am using 2 of the same widgets, both have the exact same settings, except for the query to a different category.

    In Elementor, I am using 3 columns.

    The far left column is 55% width, the next two columns holding the carousel widgets are set exactly the same width at 20%.

    I changed the widths of the columns to test it. Making any column wider did not change or fix the issue per the screenshot.

    Am I missing anything?

    Thanks

    Plugin Author Qode

    (@qodeinteractive)

    Hi Lospeso,

    We have tested this again on our side (applied with your mentioned settings) and we can not reproduce this issue: https://www.screencast.com/t/QaVBhxYDVxKP

    We have also tested with edge cases scenario (narrow columns, big gaps…) and still we can not see any issue.

    Did you maybe check if you have put some padding on some of the columns?

    Also, do you maybe have some live test domain so we could take a look?

    Regards,
    Qode

    Thread Starter lospeso

    (@lospeso)

    Thanks for the reply.

    I spent the time digging some more. With all that was said, helped me redirect the search into a different direction for the cause.

    It was a CSS entry elsewhere that resized other post images, but also did it in the carousel. When it resized the image, both images of both carousels resized nicely, but this created the misalignment issue. The CSS entry did not play well with the Carousel widget layout.

    When I fixed the CSS entry, that resolved the carousel issue, but the carousel post images returned to a larger size per the carousel and unfortunately, there are no settings in the carousel widget to make the post image smaller.

    I guess the image size has to do, but at least the misalignment issue got resolved.

    Thanks for the help.

    Plugin Author Qode

    (@qodeinteractive)

    Hi,

    We are glad that you have manged to solve your problem. If there is any other issue, we are here to help ??

    Regards,
    Qode

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Blog Carousel Vertical Alignment Issue’ is closed to new replies.