WordPress v4.9.5
Theme.co Pro v2.0.4
https://my-site.com
Hello support,
I need orientation to start at the bottom of my columns vs top.
This is to maintain a consistent bottom margin.
Right now I’m using Gap ELEMENT, but this is not helping much, margin varies, due to the length of content when responsive to a smaller screen.
Hi There,
Thank you for writing in, please remove the Gap element and add the following custom CSS on the Column’s Inline CSS area under customize tab
display: table-cell;vertical-align: bottom;
Hope it helps,
Cheers!
Thanks, This worked great!
Now, I need to do the same for this two one-by-one.
But when I add the code I get side by side.
Hi There,
Sorry, I did not anticipate that you’ll be going to need it in multiple rows. Please remove the previous inline CSS that I provided, lets use the Flexbox approach instead.
Please add this to Theme Options > CSS
.flex-row {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
.one-one {
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
Then add a CLASS flex-row to the ROWs with 2 columns.
And please address this first, or else the given CSS might not work.
Cheers!
Thanks!
This code is pushing down on every column Globally.
A global solution will not help me as I need to apply this in some individual cases, based on the background color.
I also noticed that is stacking my one-by-ones on top of each other.
I removed the code so it will go back to normal.
I’m not sure what you mean, that one is global but it still uses custom Class. So it should only affect the page that uses that class name.
I guess, what you need is the first one
display: table-cell;vertical-align: bottom;
But since it also affect the mobile view, then let’s convert it to custom CSS. Add this to your global custom CSS.
@media ( min-width: 768px ) {
.display_as_cell {
display: table-cell;vertical-align: bottom;
}
}
Then simply add display_as_cell to your column’s Class input field (not the CSS).
Hope this helps.
Thanks, I did but did not work!
Hello There,
We will force the implementation of the code by updating it into this one:
@media ( min-width: 768px ) {
.display_as_cell {
display: table-cell !important;
vertical-align: bottom !important;
}
}
Hope this helps. Kindly let us know.
Thank you, this code is more stable.
Strangely it is working on the computer but not on mobile. I test it in Safari and Chrome.
And to reaffirm, I need this to work on all devices equally.
If you want it looking the same on mobile devices as well, then you can add this CSS snippet:
@media (max-width: 768px){
.display_as_cell {
display: table-cell!important;
vertical-align: bottom !important;
width: 100vw!important;
}
}
Thanks.
Thanks,
Now it will gravitate to the bottom as desired.
But unfortunately, the 1:1 aspect-ratio stilling gets destroyed as reported already on my 2nd post.
Hi Gonzalo,
Sorry if we are just getting around here, let me clarify this first. the Flexbox approach that I provided you above works, right? But you did not use it because you said its affecting sitewide? It’s not really affecting sitewide, it’s affecting all your one-one columns because I thought that was the intention why you have that one-one class. But now I understand that you only want the start at the bottom layout on selective columns.
If that is the case then let’s just change the .one-one selector on the code that I provided above. Let’s change that to .start-at-bottom
.start-at-bottom {
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
Then add a CLASS start-at-bottom on the columns that you want to have that layout.
The problem with this if you have 2 columns, they will get stack to each other. If that happens add a CLASS flex-row to the ROW of those columns. That was the first block is for.
.flex-row {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
Hope it helps,
Cheers!
Thanks,
Now works on mobile, But.
Now, on the computer, is stacking my 1:1 Columns on top of each other, as reported already on my 3rd post.
Yes, sorry, I notice after that post that it was being applied to all my .one-one and I needed an individual class for bottom orientation.
Hi, I did actually cover that on my previous reply.
Please add this to Theme Options > CSS
.flex-row {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
And add a CLASS flex-row to the ROW with stacking columns.
<br/ >
Hope that shed some lights,
Cheers!
Ups I did see that!
Excellent solution, works good, thanks so much.
I’ll try to implement it with aligning Start and End, I hope these works.
.start-at-bottom-start {
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.start-at-bottom-end {
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}content: flex-end;
align-items: flex-end;
}
.flex-row {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
Mmm, works but there is one small stacking bug with buttons:
You will need add this new CSS snippet to sort out this issue:
.start-at-bottom-end .x-text {
flex: 0 0 100%;
}
Along with modifying these attributes for the one you already have .start-at-bottom-end, to be like:
.start-at-bottom-end {
flex-direction: row; /*modify this one please*/
flex-wrap: wrap; /*new one, please add it*/
align-content: flex-end; /*new one, please add it*/
}
Thanks.
Works Great!
The code end-up this way:
.start-at-bottom-start {
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.start-at-bottom-end {
display: flex !important;
flex-direction: row; /*Modified*/
flex-wrap: wrap; /*Added*/
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end; /*Added*/
}
.flex-row {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
}
.start-at-bottom-end .x-text { /*New*/
flex: 0 0 100%;Glad it worked.
Cheers!
One more adjustment, now with the buttons bottom to the right, as these are stacking too.
Hi Gonzalo,
start-at-bottom-start CLASS is not applicable to that situation, so we need a different class for that. Please add this to Theme Options > CSS
.bottom-left-wrap {
display: flex !important;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-items: flex-end;
align-content: flex-end;
}
Apply a CLASS bottom-left-wrap to that column instead.
I understand that flexbox is a bit complex than the standard way, but if you get the wind of it you can position element inside the container with easy.
A Complete Guide to Flexbox
Flexbox in builder
Hope it helps,
Cheers!