[Resolved] unequal container height

Home Forums Support [Resolved] unequal container height

Home Forums Support unequal container height

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #262727
    Fleur

    What I want is unuqual container heights for my containers. They are now all the same height.
    I’ve been looking on this forum but I cannot seem to find a solution.

    I relatively new to website design so a detailed the solution description would help (where to implement which code for example).

    Thanks!

    #262735
    Leo
    Staff
    Customer Support

    Hi there,

    The container height typically depends your container layout and how much content you have.
    Some info on that here: https://docs.generatepress.com/article/content-layout/

    Or maybe you are talking about feature like Sections? Then check out this article: https://docs.generatepress.com/article/sections-overview/

    The easiest way for us to help is for you to provide an example of what you are trying to accomplish 🙂

    #262820
    Fleur

    Hi Leo,

    My website is blogging website. It contains primairy navigation, header, secondary navigation, containers and footers.

    I’m not using sections but ‘normal’ containers. They are set as seperate containers.
    In Blog -> Column Layout is enabled and the number of columns is 2.
    The total number of Columns is set to 6 which gives a matrix of 3×2 (row, columns).

    Now there appear 2 columns next to each other. The width is equal which is good.
    The height is also equal and determined by the settings (title, image, preview text).

    My problem: If the content of the left column is larger than the right column the right column gets the same height as the left column (so empty ‘white’ space). So maybe my question should be how to get auto size column height depending on the content?

    Does this make my problem more clear?

    #262827
    Leo
    Staff
    Customer Support

    Have you tried using Masonry instead of Columns? (Customizer > Blog > Masonry)
    If you set the Masonry Block Width to Medium, it would be 2 columns and each container height would be autosized according to the contents.
    https://docs.generatepress.com/article/using-columns-in-the-blog

    Let me know if you still prefer to have columns with different container heights. Keep in mind that if each container is resized, there will still be a lot of background showing instead of the white space.

    #262842
    Fleur

    Hi Leo,

    Yes the masonry will do the thrick! the background is also white so this doesn’t have impact.
    I did add some code to the stylesheet (style.css ) in the old version without masonry:

    .inside-article{border-bottom: 2px solid #000000;}

    To add a line under each article. Now with the masonry it disappears…
    How should I call this item in the css?

    #262988
    Leo
    Staff
    Customer Support

    Try this CSS:

    .masonry-post .inside-article {
        border-bottom: 2px solid #000000;
    }

    Also I suggest using the instruction below for adding any CSS so you don’t lose them during updates:
    https://docs.generatepress.com/article/adding-css/

    Let me know.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.