Footer style help

Support
#1

Hi,
I’m having trouble setting up a transparent footer over a 100vh section page so the image in the background of the section shows through (ie the text in the footer shows over the content of the section). Is there a way to make the bar position like the header would be if you had a transparent header? (I hope this makes sense).

The site is in development, but is accessible here: zestdev.creativemindsdesign.com.au (note the home page does not have a header).

Thanks

#2

Hi,

Thanks for writing in!

You can try adding this in Theme Options > CSS

.home .x-colophon {
    margin-top:-96px;
}

Hope that helps

#3

Perfect! Thanks!

#4

Glad that we could be of a help :slight_smile:

#5

This has worked perfectly on desktop (exactly how I wanted it), but how can I set it to normal on mobile? I’m assuming I need to make a new bar that is only visible on mobile, but won’t the css you’ve supplied apply to it as well?

#6

Hi There,

We can wrap the given CSS to a @media query so it does not affect the mobile view.

e.g.

@media (min-width: 768px) {
	.home .x-colophon {
    	margin-top:-96px;
	}
}

Hope it helps,
Cheers!

#7

That response was insanely fast thanks! But the footer is still popping up in front of the content rather than scrolling, and it’s white.

#8

Hi @felicityevans,

I could not replicate the problem that showing in your setup. Would you mind sharing a screenshot, browser and device that you used.

Thank you so much.

#9

This image is on an iPhone 7 plus https://www.dropbox.com/s/rfpd9kk1jqmw5cj/IMG_B6BBE5856E92-1.jpeg?dl=0

And this on an iPad mini retina https://www.dropbox.com/s/1ohk4t1jwd3nsfl/IMG_BD4F579F5951-1.jpeg?dl=0

Even on desktop when you resize your browser window and scroll it pops in the white background

#10

Hey Felicity,

I see the issue in specific screen dimensions and you can see them in the screenshots below:

The cause of the issue the combination of your use of 100vh section height, your section’s content exceeding your section’s height so it overflows and the custom CSS given previously.

If you use the 100vh, you need to be mindful of your section content’s height because that is the cause of the white area because your section stays 100vh and that includes the background but your content exceeds that height. The elements inside the content must shrink to fit the dimensions of different screen widths. I’ve tried to replicate your setup in my test site and found that it’s tricky with your section bound to 100vh height though. If you can remove the footer in your design, you will have less problem.

If the footer is important to you, I’d recommend that you use Slider Revolution for this because in the silde builder, you have the option to reposition and resize layers per breakpoint. Please learn how to setup a responsive slider from the Slider Revolution Responsive Tutorial series.

If you don’t want to use Slider Revolution, you will need to setup different sections for different screen widths and use the Hide During Breakpoints feature.

If you wish to continue with the current setup, you would need a lot more custom media queries, scaling and positioning CSS for your elements. Regretfully, that would be getting into custom development which is outside the scope of our support.

I’d personally recommend that you discontinue the use of 100vh height though and display the natural flow of content.

Thank you for understanding.

#11

Ok, thanks for the input. The image in the background was actually going to be a video, so I might change the homepage to be a revolution slider plus footer, or move the copyright info to the header which appears on every other page of the site and remove the footer.

#12

HI,

That is a good idea.

Kindly refer to the link below for references


https://www.themepunch.com/revslider-doc/slider-revolution-documentation/

Thanks

#13

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