I was hoping to create a footer that is just solid white and spans the full width of the screen. Can that be done with custom code? Any help would be greatly appreciated.
Customized Footer Help
Add this to your custom CSS:
.Skin #Footer,
.Skin #Footer:empty {
max-width: 100vw;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: mediumseagreen;
display: block;
padding: 40px;
}
I've kept the colour as green to give an idea of where/how it appears. The thickness can be controlled through the padding.
ahmedA This is really close. While it does work, it is not at the very bottom of the screen so it looks a little funny since we have an image background. Is there any way for it to be at the very bottom so you cannot see any of the image below the white bar. Adjusting the padding did not fix the issue. See screenshot below.
Okay, for that you could try this. Ideally it should be pushed to the bottom, but I'm not sure how its interacting with the background image:
.Skin #Footer,
.Skin #Footer:empty {
position: absolute;
max-width: 100vw;
width: 100vw;
background-color: white;
display: block;
}
ahmedA Still running into the same issue. For some reason the bar is not showing up in the same place as the actual footer content normally does (down by the powered by Qualtrics icon).
I may have you work on this later on once our agreement if formalized.
Sure David.
Meanwhile, see if this works. Add this to the header.
position: absolute;
background: white;
height: 40px;
width: 100vw;
top: calc(100vh + 40px);
left: 0%;
display: block;
content-visibility: hidden;
"
> ...
Its getting closer. I was able to modify it a bit to get it in the place I want, but now when I add things to the footer it appears above the white bar instead of on it.
I will work on getting you a guest account for the University so you can take a more in-depth look in the future.
Thanks.
Sure David. Sounds good.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.