We're merging with GenerateBlocks! Learn more here.

[Support request] column height to adjust to the left column height

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support column height to adjust to the left column height

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #33159
    Eugen Minnich
    Participant

    Hi there,
    Maybe you can help me.

    But I would like the right column height to adjust to the left column height.

    And on the mobile display, the second and third post should be in a line below the first.

    my website:
    https://papalatics.de

    Thank you very much!

    #33190
    elvin
    Moderator

    Hi there,

    You can try adding this CSS:

    section#wpsp-2922, section#wpsp-2922 article, section#wpsp-2922 .wp-show-posts-inner {
        height: 100%;
    }
    
    section#wpsp-2922 .wp-show-posts-inner {
        display: flex;
        flex-direction: column;
    }
    
    .wp-show-posts-image {
        flex: 1 0 auto;
    }

    But if you wish to resize the image on the left side, some cropping will occur if aspect ratio has to be kept.(no stretching)

    #33203
    Eugen Minnich
    Participant

    Thanks very much. It is working.

    How do I get it now, however, that post 2 and 3 are in one line in the mobile view?

    #33218
    elvin
    Moderator

    Normally we can do it with this CSS:

    @media (max-width:768px){
    section#wpsp-2925 {
        display: flex;
        flex-direction: row;
    }
    
    section#wpsp-2925 article:not(:first-child) {
        margin-left: 20px;
    }
    }

    But I think for your case, it may be best to use max-width of 600px because your WP columns block was set to 600px for it to stack. But it’s still up to you. 😀

    #33219
    Eugen Minnich
    Participant

    Thanks very much. It works great!

    Where do you see that with the 600px or where can I change it to 768px?

    #33221
    Eugen Minnich
    Participant

    I also just tried to apply it to my list “3044”. It didn’t work there = (

    #33223
    elvin
    Moderator

    I’m not sure if this is WordPress core styling but you have this CSS on your site.

    @media (max-width: 599px){
    .wp-block-column {
        flex-basis: 100%!important;
    }
    }

    This stacks the wp columns on smaller mobile device but not on bigger ones that use 768px.

    I also just tried to apply it to my list “3044”. It didn’t work there = (

    I don’t see it being applied. You may have to clear/purge your cache plugin.

    #33224
    Eugen Minnich
    Participant

    puuhhh … no idea where I can change that to 768px. I use the GeneratePress Theme and Gutenberg Editor.

    Now I have the code for 3044 back inside.

    #33244
    elvin
    Moderator

    Are you aiming for this? – https://share.getcloudapp.com/wbubw91P

    If so, you may have to add this as well.

    section#wpsp-3044 article {
        flex: 1;
    }

    As for the WP columns block, I think that’s WordPress core default.

    If I may suggest, consider using GenerateBlocks’ Grid Block instead of that. 🙂

    #33262
    Eugen Minnich
    Participant

    Thanks very much
    I have now created all of my blocks with generate blocks.

    Is it also possible that 3 amounts per line are displayed in the desktop view and only two amounts per line in the mobile view?

    #33288
    elvin
    Moderator

    Is it also possible that 3 amounts per line are displayed in the desktop view and only two amounts per line in the mobile view?

    We’ll need to use @media rule on CSS.

    Depending on how you want it laid out, you can either do this:

    @media (max-width:768px){
        section#wpsp-3044 article {
            width: 49% !important;
        }
    }

    Or do this.

    @media (max-width:768px){
        section#wpsp-3044 article {
            flex: 1 1 49% !important;
        }
    }
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.