Category page – equal height boxes?

  • Resolved shillah

    (@shillah)


    2 years, 11 months ago

    Hi, I’m trying to customize BetterDocs Pro. For the category page, I’m using the standard 3-column grid layout. I have 9 categories total. Some of the article titles are long and others are short, so each category box has a different height.

    How can I make all the boxes display at equal height? I’m comfortable with CSS, but couldn’t find the correct ID for the category box. Thanks for any help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Sadman Sakib Nadvi

    (@sadmansakibnadvi)

    Hello there,

    Greetings. Hope you are doing good.

    Can you please share the URL to your page so that I can check and get back to you?

    Thank you so much. Have a great day.

    Thread Starter shillah

    (@shillah)

    Hi Sadman, unfortunately I can’t, it’s a development site locally hosted on my computer.

    Here’s a screenshot of what it currently looks like: https://ibb.co/8734Sf1

    As you can see, the box for Category 3 is much taller than the other two. I’d like all 3 boxes to be the same height, regardless of how much content is in each of them. I hope that makes sense.

    Plugin Support Sadman Sakib Nadvi

    (@sadmansakibnadvi)

    Hello again,

    It seems strange. Can you please try disabling the masonry layout? https://d.pr/i/QmwRCn

    If it doesn’t work Can you please create a support ticket so that we can check more deeply: https://wpdeveloper.com/support/new-ticket

    Thank you.

    Thread Starter shillah

    (@shillah)

    Thanks Sadman. Deactivating the “Masonry” option didn’t work. This is the effect I want: https://www.w3schools.com/howto/howto_css_equal_height.asp

    I’m not sure why you say it seems strange — unequal height boxes in the Category grid are the default setting. Even the BetterDocs documentation page has unequal height boxes. ??

    I will open a Support ticket, thanks.

    Plugin Support Sadman Sakib Nadvi

    (@sadmansakibnadvi)

    Hello there,

    Greetings.

    Well, I just checked it from my end. Please check the video: https://d.pr/v/SN3pR5
    As you see when I disabled the masonry layout and it changes to equal height.
    If that isn’t working on your end. Then it is possible there is a conflict with either theme/plugin. For which the CSS is being overwritten.

    So, I would recommend you temporarily switch the theme and deactivate 3rd party plugins except for BetterDocs. Let me know how it goes.

    If the issue still occurring, please create a staging/test site and give us the link to your doc page to check more deeply.

    Thank you.

    Thread Starter shillah

    (@shillah)

    Thank you Sadman! What you have in the video, that’s exactly what I’m looking for.

    I’ll try those steps. I don’t have much content in Better Docs yet, so if your suggestion doesn’t work then I’ll uninstall both Better Docs and BD Pro, and re-install and start with the default Category page. Thanks for your help.

    Thread Starter shillah

    (@shillah)

    Solved, thanks Sadman. I went back to the default built-in Category page, and that has the proper equal height boxes.

    I was using a custom page built in Elementor and using the Better Docs shortcode, since I wanted more control over the styling. But I can probably tweak the CSS for the built-in Category page instead. Thanks for your help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Category page – equal height boxes?’ is closed to new replies.