column height to adjust to the left column height

This topic has 10 replies, 2 voices, and was last updated 1 year, 7 months ago by elvin.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
August 24, 2021 at 1:29 pm #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!

August 24, 2021 at 11:29 pm #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)
August 25, 2021 at 7:33 am #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?

August 25, 2021 at 7:18 pm #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. 😀
August 25, 2021 at 11:18 pm #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?

August 25, 2021 at 11:55 pm #33221

Eugen Minnich
Participant

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

August 26, 2021 at 1:17 am #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.
August 26, 2021 at 2:17 am #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.

August 26, 2021 at 7:46 pm #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. 🙂
August 28, 2021 at 2:52 pm #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?

August 29, 2021 at 7:30 pm #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;
    }
}
```
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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