Hi there,
I was wondering if you could help me? I have a column inside a column, and am trying to align an element to the bottom of each column. I have achieved this using a single column before, by enabling Flexbox and then setting the element above bottom margin to 0. However, for the life of me I cannot get it to work for a column inside a column.
Any help appreciated.
Hi Jayd,
Thank you for writing in, apply a margin-top: auto to the element that you want to push on the bottom of the column. That should do the trick.
If it does not work, please point us your nested column because I don’t see it on this page (https://simplygraphics.com/web/)
Cheers!
Hi there, I had tried that too initially and sadly had not worked.
I have created an image below to show you my setup. I have a main column (red), and added another row inside to make a new column (blue). This was so I could achieve padding around the text inside the 2nd column without affecting the image at the top. If you have any advice on how I can get this to work I’d be most grateful.
I have another issue I wondered if you could help me with? I have 3 videos set up on here to ‘autoplay’ and play on loop. When I had one video at the top of the website this autoplayed and looped fine. Now I have 3 videos on each page, you need to click each of them to play - even though they are all set to autoplay. I was wondering if this is a known issue and what can be done about it? Many thanks.
Hey Jayd,
It is the browser preventing multiple videos to play because it’s not a good user experience. We cannot provide a workaround for that as mainly, it would require custom development which is outside the scope of our support. Also, that is against user experience best practice.
Thank you for understanding.
Hi there, makes perfect sense thanks for getting back to me
Let me know if you can help with the original question about aligning elements to the bottom of columns within columns. I had put in a screenshot to help you see what I meant.
Hello Jayd,
Do you want to align the image to the bottom of the column like this?
Please select the column, make sure that Flexbox option is enabled then then align it vertically to the bottom of the column.
We would love to know if this has worked for you. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Thank you.
Hi there,
Thanks for getting back to me but sadly you are looking in the wrong place. I have included some more screenshots below. I have a column within a column, using another row. I have highlighted on which columns this issue is arising (the pricing of our web packages). The element at the bottom, in this case ‘Hosting Charged at…’ in grey writing and ‘click here for seo options’ in turquoise writing needs to be aligned to the bottom of the column. I have tried using flexbox with margin 0 on the top for these elements, as well as margin 0 for the bottom on the element above. Nothing works. Just to be clear I have made this work before on other projects, but I assume the issue here is because it is a column within a column? I have tried using flexbox on the main column and using it on the column inside to no avail. Please let me know if you can help as I am not sure why this isn’t working. PS - I need the column within a column to make sure the text elements have padding around them, without affecting the image at the top of each column.
Fixed the issue by removing the column inside of the column, and adding 1.5 em padding but -1.5 margin on the image at the top. It’s not the most elegant solution but is working.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
