Home › Forums › Pro Support › column height to adjust to the left column height
- This topic has 10 replies, 2 voices, and was last updated 2 years, 1 month ago by
elvin.
-
AuthorPosts
-
August 24, 2021 at 1:29 pm #33159
Eugen Minnich
ParticipantHi 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.deThank you very much!
August 24, 2021 at 11:29 pm #33190elvin
ModeratorHi 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 #33203Eugen Minnich
ParticipantThanks 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 #33218elvin
ModeratorNormally 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 #33219Eugen Minnich
ParticipantThanks 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 #33221Eugen Minnich
ParticipantI also just tried to apply it to my list “3044”. It didn’t work there = (
August 26, 2021 at 1:17 am #33223elvin
ModeratorI’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 #33224Eugen Minnich
Participantpuuhhh … 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 #33244elvin
ModeratorAre 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 #33262Eugen Minnich
ParticipantThanks 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 #33288elvin
ModeratorIs 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; } }
-
AuthorPosts
- You must be logged in to reply to this topic.