Horizontal align column and make 100% vh size

Support
#1

Hi there.

I was wondering if you could help me? I have a section that is split into two columns, that I’d like to be 100% vh size. I also want the ‘classic text type’ element along with simple line of text underneath to always be in the centre, vertically and horizontally aligned within the column to always appear dead in the centre. I have worked out how to vertically align with flex in the columns, but not how to horizontally align. If I use flex to horizontally align to the centre, the two elements (classic text type and text) both centre align, but I’d like the text underneath to be left aligned to classic text type. I have got it as close as I can with padding, but this isn’t ideal as it doesn’t stay in the centre, as depends on screen size.

Please look at this link below and let me know if there is a way I can achieve this, many thanks!

https://simplygraphics.com/

#2

This is what happens when I use flex to vertically and horizontally align, you can see the ‘Londons affordable design agency’ centre aligns, when I’d like just that element to be left aligned.

Let me know if you can help!

https://simplygraphics.com/web/

#3

Hi Jayd,

Thanks for reaching out.

Unfortunately, I can’t check what’s already done and how it currently looks. Would you mind providing your admin login credentials in the secure note? It’s currently behind an under construction page.

The flex styling will be applied to all elements so I recommend not using that. But since your referring to classic elements which text-aligment may be different, than I like to check it first.

Or how about having multiple rows within a section, and set the section height to 100 vh. Then each row has columns that have different flex alignment (texts per row but aligned through columns)? That would work too.

Thanks!

#4

Hi there! Oh sorry, I forgot I had it under a curtain.
Please check again, the website can now be viewed.

On your second point, I do have multiple rows in a section, not sure how to set the section height to 100vh. If you could point me in the right direction that would be great as can’t seem to find the settings, thanks!

#5

Hi @EarlySigns,

You can add the custom CSS below on your Section’s Element CSS area

$el.x-section {
	min-height: 100vh;
}

Regarding the text type and text element alignment, try applying an equal fix width to both elements, say 385px.

Hope it helps,
Cheers!

#6

Hi there,

Thanks for coming back to me. Sadly, neither of these solutions have worked.
If you go to the www.simplygraphics.com/web, you will see I have applied the code for the Element CSS area to the section, but nothing has been affected. The column consists of a square image on one side, and some centred horizontally/vertically text on the other side. I have also tried applying an equal fix width to both elements, it pushes the second column (with the image) out of the way/underneath. I have also tried adding fixed width on both sides to the column containing the text type and text elements with same results.

Please let me know if there is another way I can achieve this.

#7

Hi Jayd,

The site is “under construction”, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.