Truly justify the text of "next" button | XM Community
Skip to main content

I have some CSS code in place to hide the default “next page” text of the next button, because I only want to display the clean “<” and “>” arrows. The code I’m using is:

/* next/back button */
#navigation .navigation-button,
#navigation .previous-button {
  font-size: 0; /* Hides the text */
}

This works nicely except one thing:

Even though the source code says, the content is center-justified, it is clearly not, i.e. the next button is shifted a little bit to the right. Here’s a zoom of it /the two smaller lines are exactly 50% of the width of the button):

So how can I make sure that the next/back arrows are exactly centered?

Hi ​@MartinD 

Try this:

#navigation #previous-button span,
#navigation #next-button span {
    display: none;
}

#navigation #previous-button svg,
#navigation #next-button svg {
    margin: 0;
}

 

This somehow doesn’t work, unfortunately. Even if I change th #previous-button to .previous-button.

 

Just to prevent misunderstanding. Is this code INSTEAD of mine or in addition?

Instead of your code. Maybe check that you don’t have other CSS rules overwriting that style.

Here’s the result I get:

 

Weird, I just copied in your code again, and now it works. Thanks.

No worries! 🙂 Sometimes, it can be cache issues too.

 

Terms & Conditions