Best answer by iammike
View original
How to reduce space between buttons and footer
I'm new to the forum and wanted to see if anyone could help with the following. I've designed my survey and it all looks good but I would like to remove some of the large space between my buttons at the bottom of the page (within my questions container) and my footer i.e. I would like my footer to be just below my questions container. Any help would be much appreciated! Ash
So I'm not a CSS expert... not even close. But, feel free to try out this CSS I hacked together to help eliminate whitespace within a survey:
Open your survey and go to: Look and Feel > Style > Custom CSS > Edit
.Skin #Wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -480px;
}
.Skin .SkinInner {
padding-top: 5px;
}
.Skin #Plug {
margin-top: 0px;
margin-bottom: 0px;
}
.Skin .Separator {
margin:0px 5px;
}
.Skin .QuestionBody {
padding-bottom: -50px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.Skin #LogoContainer {
padding: 0 0px;
padding-top: -50px;
}
.Skin .QuestionText {
font-size: 100%;
padding: 0px;
}
.Skin .QuestionBody {
padding:0px 0px 0px 0px;
}
.Skin #Plug a {
color: #FFFFFF;
}
.Skin #Plug a {
font-size: 0px;
color: #FFFFFF;
text-decoration: none;
padding: 0px 0px;
}
.Skin #PushStickyFooter {
height: 0px;
}
.Skin #BrandingFooter, .Skin #Footer {
margin-top: 0px;
}
Open your survey and go to: Look and Feel > Style > Custom CSS > Edit
.Skin #Wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -480px;
}
.Skin .SkinInner {
padding-top: 5px;
}
.Skin #Plug {
margin-top: 0px;
margin-bottom: 0px;
}
.Skin .Separator {
margin:0px 5px;
}
.Skin .QuestionBody {
padding-bottom: -50px !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.Skin #LogoContainer {
padding: 0 0px;
padding-top: -50px;
}
.Skin .QuestionText {
font-size: 100%;
padding: 0px;
}
.Skin .QuestionBody {
padding:0px 0px 0px 0px;
}
.Skin #Plug a {
color: #FFFFFF;
}
.Skin #Plug a {
font-size: 0px;
color: #FFFFFF;
text-decoration: none;
padding: 0px 0px;
}
.Skin #PushStickyFooter {
height: 0px;
}
.Skin #BrandingFooter, .Skin #Footer {
margin-top: 0px;
}
Thanks iammike, much appreciated
This worked perfectly! (it was your footer CSS that was most useful)
This worked perfectly! (it was your footer CSS that was most useful)
+4
This is amazing! Do you by chance know how to reduce more white space between the answer options and the forward button? I've still got lots of space I'd love to eliminate - see screenshot.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.