I’m trying to vertically center an image with text beneath it. How do I do that?
Page info is in secure note. Section is titled “4 Images”.
Hi @eutaw,
Thank you for writing in, I did go ahead and created a new Section of that 4 images. These new generations of sections/rows/columns have a flexbox option so you can easily horizontally and vertically center elements inside columns now.
I would like to point, a mistake that you made, is you separate Row the image and its corresponding text, while that looks fine on desktop, that is not going to look right on mobile.
Hope it helps,
Cheers!
Thank you very much and many thanks for pointing out the error I made.
I used flex box on another page (see secure note) for page. I believe I have all the setting correct but the column does not look vertically centered. Why? The column is in the Welcome section.
Hey @eutaw,
To answer your question, I’d like to correct this previous statement first:
It’s only the New Row and New Columns that have Flexbox options. After resolving this new issue, I’d recommend you watch this video https://youtu.be/6pN_a4eD5NM
Now regarding the issue, first, your Section’s Top and Bottom paddings should be the same. Right now, your top padding is 130px while your bottom padding is 45px.
That will not solve the issue just yet. You’ve added a min-height to your welcome section via Element CSS. Because the Section is not powered by Flexbox, you would need additional custom CSS to center the Row and that’s only recommended if you know CSS.
If you don’t know CSS, don’t add height or min-height to the Section. Please remove the code in the Element CSS.
At this point, your Welcome Section’s top and bottom padding should be the same and the min-height removed.
The last step is to set the bottom margin of your “WATCH PREVIOUS SERMONS” text to 0 and set the Line Height of the “YOU’RE INVITED!” text to 1.2.
Doing all that will almost perfectly center the contents of the Welcome section.
Hope that helps.
OK, thanks for the help and video suggestion. I listened to video but am still having a problem. In the page that is listed in the secure note, I am trying to make the 3 images in my "3 Images"section look like the 3 images on the page below.
These images expand with the page and has no space between the images. Please point me in the right direction.
Hey @eutaw,
To achieve the 3 column setup like in your sample site, you will need to use the Images as the background for each column. You can then add Text and Button elements to each column.
Each column should then have this setup:
- Flex Layout: On
- Child Placement: Column Wrap
- Align Horizontal : Center
- Align Vertical: Center
Hope that helps.
I added a new section (section 6) to use the images as the background for each column. When I view the page, the width looks good but the height is very small. How do I get the height to be the height of the images?
Hi @eutaw,
Not the actual height of the image. But you can add a $el {min-height: 400px;} to ROW.
Make sure its the ROW, not the section.
Cheers!
Thank you very much!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.