Good afternoon! Can you please tell me how to correctly align the blocks in height and width of the Image Layout? .row rule
{
display: flex
width: 400px
height: 900px;
}
!important
Does not work!
Staff replied
SP Page Builder
align blocks in height and width Image Layout
34 replies
Mehtaz Afsana Borsha Staff
Hi
Thanks for contacting us. Could you please give me your site URL and also screenshot of your issue?
-Regards.
Web designer Asked this
Good afternoon! I want all blocks to display the same height regardless of text size. I wrote the code for this, but it doesn't work.
.row
{
display: flex width: 400px height: 900px;
}
!important
What to do?
Attached is a screenshot of the blocks on the site.
Web designer Asked this
Can you help me?
Mehtaz Afsana Borsha Staff
Hi,
Sorry for the delay. Please follow this documentation below:
It may help you. If you need again help please share your site URL so that I can check.
Web designer Asked this
I have completely dispersed blocks. I have completely dispersed blocks. Look please!
Mehtaz Afsana Borsha Staff
Hi,
Use this custom CSS
.sppb-addon-image-layout-content{
height:900px !important;
}Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Web designer Asked this
Excellent. Only I reduced the height to 600 and everything began to display correctly
But the blocks where there is little text suffered and they became huge in height. Look please.
Screenshot is attached.
Web designer Asked this
please tell me there is a solution to this problem?
Mehtaz Afsana Borsha Staff
Just reduce the hegiht then everything will be alright. Delete my previous code and use this one.
.sppb-addon-image-layout-content{
height:500px !important;
}
Web designer Asked this
I already did this, the text does not fit into blocks then. And those without text get very large as before.
Web designer Asked this
Could you invite a specialist who can help me?
Web designer Asked this
I enabled the option on your advice. The blocks did not become equal in height. Made them tall. Nothing works. On another site, I wrote the code for the block of features and only after that the blocks became equal. With this kind of blocks, I can't do anything. Your advice doesn't work. Screenshot proof that I included vertical alignment for the blocks in the section.
I need help. Invite, please, a specialist who can help me.
Mehtaz Afsana Borsha Staff
Give me your super admin access please.
Web designer Asked this
Good. I give
Mehtaz Afsana Borsha Staff
Web designer Asked this
Thank you, of course, but I told you yesterday that this method is not suitable. Look at my screenshot, where you can see that the text has crawled out of the block border.
It should not be.
Web designer Asked this
Thank you, of course, but I told you yesterday that this method is not suitable. Look at my screenshot, where you can see that the text has crawled out of the block border.
It should not be.
Web designer Asked this
Thank you, of course, but I told you yesterday that this method is not suitable. Look at my screenshot, where you can see that the text has crawled out of the block border.
It should not be.
Mehtaz Afsana Borsha Staff
Which page you are facing this? Because it seems ok on my end I was also sending you the screenshot. By the way now check please and let me know.
Web designer Asked this
Thank you, of course, but I told you yesterday that this method is not suitable. Look at my screenshot, where you can see that the text has crawled out of the block border.
It should not be.
Web designer Asked this
now 1 block below the others
Web designer Asked this
I need help. Invite, please, a specialist who can help me.
Mehtaz Afsana Borsha Staff
Did you check properly? Please clear your browser cache and check again. Dont you think I am specialist??
Web designer Asked this
I have updated the browser cache. See how much empty space has formed and how ugly everything looks
Web designer Asked this
I need help. Invite, please, a specialist who can help me.
Mehtaz Afsana Borsha Staff
This is the only solution. Further then we have nothing to do. I am also talking with other specialist they also said that.
Web designer Asked this
Well, if so, then I will no longer extend your expensive component! If it is so unadapted for the normal display of blocks.
Web designer Asked this
If you consider such a display of blocks, as in the screenshot, to be normal, then I don’t need such a component! I won't pay for it anymore.
Web designer Asked this
And so the result:
The instruction that you gave me the link - https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-2-x/how-to-use-columns-equal-height is not working. So, as each block had to be written manually, so that each block had a fixed height and it was displayed correctly.
The rule that I sent you does not work for this block, but only for the features block. There I had to manually write the code: .row { display: flex width: 400px height: 900px; } so that the blocks are the same height.
Can you change the instructions? Why give something that doesn't work in the end?
Paul Frankowski Senior Staff
If I may...
without using any extra CSS >> https://www.youtube.com/watch?v=acZCjxEB3K4
old but still current tip (!) from my channel
Web designer Asked this
Thank you very much for answering. I watched your video, but as I wrote above, this method does not work.
Paul Frankowski Senior Staff
worked for me
Web designer Asked this
your specialist had access to my site and saw that this method did not work. Therefore, they applied css
Paul Frankowski Senior Staff
I saw on your homepage that you have already equal-height columns with "English Breakfast, Mint...."
You set height value, maybe it's not perfect solution but if works.
Log in to reply.