Content band vertical bottom

Hi,

I am currently building a page and have an inner content band with an image inside. I can’t get the image to align on the bottom of this column, and there does not seem to be any setting in either content band or the image to help with this.

Any advise please?

You can view the page here: http://www.gradian.co.uk/blue-lights-invitation/

Anthony @ CMS.

Hi There,

You can add a gap below the image.

Note that the gap element also has an option to hide the gap based on the screenwidth which comes really handy.

You won’t need the gap once your columns stack, so if you hade it for mobile and tablet you have it.

Hope it helps!

Hi Joao,

Unfortunately I couldn’t get that to work. I’ve attached an image of what the page layout looks like and at the bottom what I want the page to do. As you can see, the image/Inner band should be sitting always at the bottom of the column.

Any help would be appreciated.

Thank you in advance.

Hi There,

Did you set the gap size?

If yes please provide your admin credentials so we can take a look.

Thanks

Hi,

I’ve added a secure note with the details. I have to ask though, that adding a gap to push the image down, won’t keep it at the bottom because of the responsive nature of the site?

Ideally I am looking for the image to be stuck at the bottom of the column, even when the browser moves around.

Hope that helps.

Hi Anthony,

The height of the column will depend on it’s content by default. To achieve what you want means that we have to set left and right column to have same height first. We have this for Cornerstone section: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272. Let’s adjust that code to work on your content band. Add this instead:

jQuery(document).ready(function($) {
	var max = 0;
	$("#x-content-band-1 .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$("#x-content-band-1 .x-column").css('height', max);
});

Then on your right column, your setup at the moment is like this:
GAP element
Text element
ROW > then image inside.

Remove the ROW. Add the image directly after the text element. This will make your right column content to:
GAP element
Text element
Image element.

Then on the right column style field add position: relative;
Update this custom CSS:

.webinarLogos{
   width: 100%;
  margin-bottom: 0;
  vertical-align:bottom;
}

To this

.webinarLogos {
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
}

Just to explain the process, the jquery will set same height on both columns, then the CSS now can position the image on the bottom of the right column.

Hope this helps.

Hi Lely,

Many thanks for taking the time to help me with this. I think I followed your instructions, but nothing seems to have changed.

Please advise?

Many thanks in advance.

Hi,

Upon checking, I can see you added the wrong code.

Please change the js code to this.

jQuery(document).ready(function($) {
	var max = 0;
	$(".page-id-2121 #x-content-band-1 .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".page-id-2121 #x-content-band-1 .x-column").css('height', max);
});

Then add this in Custom CSS

.page-id-2121 #x-content-band-1 .x-column {
   position:relative;
}

.page-id-2121 #x-content-band-1 .x-column img {
    position:absolute;
    bottom:0;
}

Hope that helps.