Removing white space between graphic and next button | XM Community
Solved

Removing white space between graphic and next button

  • 6 June 2018
  • 5 replies
  • 285 views
U
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
icon

Best answer by TomG 6 June 2018, 15:20

View original

5 replies

TomG
Rank
Userlevel 7
Badge +27
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.
J
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
TomG
Rank
Userlevel 7
Badge +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).
A
> @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!!
TomG
Rank
Userlevel 7
Badge +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.

Leave a Reply


Terms & Conditions