Docs

[Kelsey L]

URL: http://orgess.com/wordpress/wp/

Hello,

My client has asked to have an image appearing above the bottom-right side of the footer, as in the example above. I’ve got it positioned absolutely right now, but that isn’t working with the responsive nature of the site. What’s the best way to accomplish this that will work with the responsive design?

Image URL: http://orgess.com/wordpress/wp/wp-content/uploads/2016/11/footer-flowers-1.png

Thank you!

[Kelsey L]

This reply has been marked as private.

[Kelsey L]

Another related question: is it possible to have the site footer stick to the bottom of the screen, and the slider adjust responsively to fill the space between the header and footer on the homepage?

[Rad]

Hi there,

You should use rev slider with fullscreen setting and offset container of .x-colophon. It’s not possible on your current slider since it’s only limited to that size.

About the image, you may add it as a background and add top padding in the footer equal to the height of your image.

Thanks!

[Kelsey L]

Hi Rad,

I’m not having any luck with either of those – I switched the slider to Revolution Slider and set it to offset by the height of the footer, but it’s still a little too tall. And the padding added to the footer is just making it taller. Help? Thank you!

[Friech]

Hi There,

Use the classes below for offseting the header and the footer.

.masthead, .x-colophon

Then add this property on your background.

background-size: cover;
 background-repeat: no-repeat;

Hope it helps, Cheers!

[Kelsey L]

Hi Friech,

Still no luck on the footer image: http://orgess.com/wordpress/wp/

Here’s my CSS:

footer.x-colophon.bottom {
 background-image: url("http://orgess.com/wordpress/wp/wp-content/uploads/2016/11/footer-flowers-1.png");
  background-size: cover;
 background-repeat: no-repeat;
  background-position: 150px;

  border-top:none;
-webkit-box-shadow: none;
box-shadow: none;
  padding-bottom:0px;
  padding-top:0px;
}

[Kelsey L]

Whoops, here’s the correct CSS:

footer.x-colophon.bottom {
 background-image: url("http://orgess.com/wordpress/wp/wp-content/uploads/2016/11/footer-flowers-1.png");
  background-size: cover;
 background-repeat: no-repeat;
border-top:none;
-webkit-box-shadow: none;
box-shadow: none;
  padding-bottom:0px;
  padding-top:0px;
}

[Lely]

Hi There,

It is not overlapping content anymore when I check. See this:http://screencast-o-matic.com/watch/cDl1QQQoJ7
If it’s overlapping the content, part of the image inside the revslider should be seen when I set footer background to transparent. But then as you can see, it’s the body because when I set body background color to check we’ve seen it. I also check on other pages. Please clarify.

[Kelsey L]

Hi Lely,

I’m an idiot. I didn’t set the footer background to transparent. Thank you!

[Kelsey L]

Hi again Lely,

Here’s what I have now: http://orgess.com/wordpress/wp/

I’m having trouble getting rid of the extra bit of border that appears above the green image.

[Friech]

Hi There,

Lets remove the border-left from the anchor itself.

.x-colophon.bottom .x-nav>li>a {
    border-left: 1px solid #b2b2b2 !important;
}

And lets add it on the <li> tag instead

.x-colophon.bottom .x-nav li {
	    border-left: 1px solid #b2b2b2 !important;
}

Hope it helps, Cheers!

[Kelsey L]

Perfect. Thank you!

[Thai]

If you need anything else please let us know.

[Author]

Posts