Align images to side of text and stick footer to bottom of browser window

[glitchfield]

Hi,

I am creating a holding page for the main website here:
http://www.bournairfield.co.uk/wp/

I would like to align the map markers A and B to the left of the text - is this possible?

I would also like the footer to sit at the bottom of the browser window and the blue colour to extend down, is this also possible?

Thanks.

[jade]

Hi there,

Please click on the customize option of the image element then add an inline CSS: float: left;

Hope this helps.

[glitchfield]

Hi,

That’s great thanks.

Is there also a way to make the footer stick to the bottom of the browser window?

[Prasant]

Hello @glitchfield,

Thanks for asking.

Yes, you can add following CSS under Pro > Launch > Theme Options > CSS to have fixed footer:

  footer.x-colophon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    z-index: 100;
  } 

Thanks.

[glitchfield]

Hi,

Thanks for that - it’s nearly there! Is it possible for the content to ‘push’ the footer down so on a short page the page extends down, but on a long page the footer is at the bottom of the content and not displayed over the top?

[friech]

Hi There,

Do you mean you need the page to take up the entire above-fold area even if the page does not have enough content? Please add this to Theme Options > CSS

.x-main.full {
	min-height: calc(100vh - 192px);
}

Hope it helps,
Cheers!

[glitchfield]

Hi,

Yes, it’s that but also if the content is longer than the browser window, then the footer gets pushed down off window, so it never appears on top of the content.

Does that make sense?

[thai]

Hi There,

Please update the previous CSS to this:

.x-main.full {
	padding-bottom: 96px;
}

Hope it helps