footer image - setting to show full image on all resolutions

csyring · January 2019

Hi,

I want to show an image on the very bottom of my website. I want it to always show the full height and to adjust according to the screen's width.

For a FullHD resolution, I have set:

style - "stick to bottom"

inner margin: "0 0 550px" otherwise the image will overlay the footer content

position: "center-bottom | no-repeat"

size: "contain"

This leads to the image adjust it's size according to the screen's width. However, the narrower the screen is, the further down the image is shifted. As written above, I need the 550px to make it look decent on desktops. What do I need to set in order to have the image underneath the footer's text on narrower resolutions?

URL: https://www.flying-dudes.de/kontakt/

Thanks for your support!

Christian

Pablo · January 2019

Hi,

I do not understand what exactly you want to achieve, but I assume you want to decrease the margin/padding of the div above the image of people doing push-ups.

You should use the @media queries rule:

@media (max-width:767px){
	.widgets_wrapper{
		padding:0px 0px 300px !important;
		background:transparent !important;
	}
}

or recreate the footer with muffin builder - I mean to disable footer entirely from the website and creating the footer as a "last section of muffin builder" and copy & paste it on every page.
Thanks

csyring · January 2019

Hi Pablo,

thanks for the quick reply. I figured that it will never work with the footer. So, I'd rather use the "last section" on each page. But how can I copy&paste a whole section in the builder?

Regards
Christian

Pablo · January 2019

Unfortunately, it's not possible yet.

We are currently working to include this option in Muffin Builder, so now you have to do it manually or create the new page with only one section (footer) and use the import/export tool on new pages.

Thanks

csyring · January 2019

I have now replaced the footer with the last section.

For the future development it would be great if one could use a predefined section as a footer.

footer image - setting to show full image on all resolutions

Comments

This website uses cookies