Columns orientation to start at the bottom vs top

Support
#4

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!

#5

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.

#6

Hi @VGonzaloMartinez,

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.

#7

Thanks, I did but did not work!

#8

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.

#9

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.

#10

Hi @VGonzaloMartinez

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.

#11

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.

#12

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!

1 Like
#13

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.

#14

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!

1 Like
#15

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:

#16

Hi @VGonzaloMartinez

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.

#17

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%;
#18

Glad it worked.

Cheers!

#19

One more adjustment, now with the buttons bottom to the right, as these are stacking too.

#20

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!

#21

Thanks,

This code is fixed the buttons but forces the Headline and Text to be next to each other.

Is original code A now redundant?

#22

Hi Gonzalo,

Please keep the other class for other pages.

Please set the text width to 100%



Cheers!

1 Like
#23

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