Solved

Previous and next button Equal width

Forum|Forum|19 hours ago
June 22, 2026
3 replies
9 views

+1

laveenacrasta

In Qualtrics, when using a popover interceptor creative, why don’t the Next and Previous buttons appear the same width? Specifically, the Next button looks more elongated than the Previous button.

Best answer by vgayraud

Hi,

You seem to be using a survey as embedded target. In your survey’s Look & Feel settings, go to Style > Custom CSS and add these rules.

#primary-navigation {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

#primary-navigation .navigation-button {
  justify-content: center !important;
}

#primary-navigation #next-button {
  grid-column: 2 !important;
}

+10

gPandey_715
Level 4 ●●●●
Forum|Forum|5 hours ago
June 23, 2026

Hi @laveenacrasta ,

This is typically expected behavior in popover creatives. The button width is often determined by the button content and styling applied by the creative theme. Since the Next button contains different text/icon spacing, it can appear wider than the Previous button. If equal widths are required, you would need to apply custom CSS (where supported) to set a fixed width or use a flex layout so both buttons occupy the same space.

GAP | Senior Implementation Engineer | www.linkedin.com/in/gaurav-pandey-8291092267gap

Like

+65

vgayraud
QPN Level 7 ●●●●●●●
Answer
Forum|Forum|3 hours ago
June 23, 2026

Hi,

You seem to be using a survey as embedded target. In your survey’s Look & Feel settings, go to Style > Custom CSS and add these rules.

#primary-navigation {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

#primary-navigation .navigation-button {
  justify-content: center !important;
}

#primary-navigation #next-button {
  grid-column: 2 !important;
}