Responsiveness of Column Height

Support
#21

Ok its working again, the only problem now is that when I add text align center to the column to center the image, the button gets center by its left edge

#22

Hi There,

I see that you added a CSS rule, something like the following on your button elements.

	$el {
	    position: absolute;
	    bottom: 0px;
	}

Let’s wrap that with a media query so it does not mess up the responsive view.

e.g.

@media (min-width: 768px) {
	$el {
	    position: absolute;
	    bottom: 0px;
	}
}

Hope it helps,
Cheers!

#23

I was able to get the desired effect by adding this to the row css, without any other global js or css

$el .x-column .x-image{
display: block;
}

$el .x-column .x-image img{
margin: auto;
}

$el .x-column{
min-height: 370px;
margin-bottom: 20px;
}

@media only screen and (min-width: 769px){
$el {
display: flex;
width: 100%;
}

$el .x-column{
flex: 1;
min-height: 370px;
}

#24

Glad you’ve sorted it out and thank you for sharing the solution with us.

Cheers!

#25

Sure thing, thanks for your help!

#26

You are most welcome. :slight_smile:

#27

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