Solved
Removing white space between graphic and next button
Hi there,
I have several places in my survey where I want to display an information screen which I have created in PowerPoint, saved as a jpg file and uploaded as a graphic. My problem is that there is a lot of white space below the bottom of the graphic and the next button which means constantly scrolling down for the next button. I have tried making the image smaller so that the next button is displayed without scrolling but then some of the information in the graphic is too small to see properly - any suggestions?
Thanks
Best answer by TomG
You can reduce or eliminate the top margin and padding on the `#Buttons` element. For example, for only 10px of space:
```
.Skin #Buttons { margin-top:5px; padding-top:5px }
```
You can add it to a `<style>` tag in your question text to apply only to the page or in your Look & Feel CSS to apply to the whole survey.
+27You can reduce or eliminate the top margin and padding on the `#Buttons` element. For example, for only 10px of space:
```
.Skin #Buttons { margin-top:5px; padding-top:5px }
```
You can add it to a `<style>` tag in your question text to apply only to the page or in your Look & Feel CSS to apply to the whole survey.
Hi,
I'm also trying to adapt the next and back button and haven't been able to find the answer to my specific question.
I would like to increase the width (make it fatter) of the next and back arrow, but not sure of the code. The code below works a treat for increasing the size of the arrow but i'm not familiar enough with CSS to know what to write to increase the width/style of the arrow.
Any advice would be much appreciated. I am learning so much from the Community. Thanks a bunch.
.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {
font-size:36px
}
Cheers,
Janette
+27> @JanetteM said:
> Hi,
> I'm also trying to adapt the next and back button and haven't been able to find the answer to my specific question.
>
> I would like to increase the width (make it fatter) of the next and back arrow, but not sure of the code. The code below works a treat for increasing the size of the arrow but i'm not familiar enough with CSS to know what to write to increase the width/style of the arrow.
> Any advice would be much appreciated. I am learning so much from the Community. Thanks a bunch.
>
> .Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {
> font-size:36px
> }
>
> Cheers,
> Janette
@Janette - The arrow is a character symbol. You can use a different symbol. In Look & Feel replace the right arrow with ⟶ (long right arrow).
> @TomG said:
> You can reduce or eliminate the top margin and padding on the `#Buttons` element. For example, for only 10px of space:
> ```
> .Skin #Buttons { margin-top:5px; padding-top:5px }
> ```
> You can add it to a `<style>` tag in your question text to apply only to the page or in your Look & Feel CSS to apply to the whole survey.
> @TomG said:
> You can reduce or eliminate the top margin and padding on the `#Buttons` element. For example, for only 10px of space:
> ```
> .Skin #Buttons { margin-top:5px; padding-top:5px }
> ```
> You can add it to a `<style>` tag in your question text to apply only to the page or in your Look & Feel CSS to apply to the whole survey.
Hi Tom, I also want to reduce the space between my question and the next question button, I have try to introduce the code and changed the values but I don't notice any difference. Any idea? Thanks in advance!!
+27> @acan said:
> Hi Tom, I also want to reduce the space between my question and the next question button, I have try to introduce the code and changed the values but I don't notice any difference. Any idea? Thanks in advance!!
I can't give a one size fits all answer because it depends on the theme you are using. Use your browser's inspect feature to figure out where the space is coming from then adjust the CSS appropriately.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.