Granular ellipses control

No one has ever needed to hide the ellipses.

There is a setting called “Hide Ellipses”; which as I recall was added as I made a good case for being able to hide it a number of years back.

Now we have that control in the settings, it would be nice to have control over it within the function call as well.

Since the plugin doesn’t allow you to have different configuration based on mobile/desktop, I have had to create two separate functions calls, one that uses the default, and another where I override the default settings; where desktop shows a lot more pages, and preferably the ellipses.

They need to be hidden on mobile due to lack of space…

The ellipses has a class, ‘gap’, which could be used in a CSS media query to hide on mobile.

`@media screen and (max-width: 768px) {
.gap {
display: none !important;
}
}’

Yep, however the margin-left is applied to it’s container LI element, so hiding the ellipses only still leaves you with an unnecessary margin.

@media screen and (max-width: 768px) {
.gap {
display: none !important;

margin-right: 0 !important;
}
}

Try this.

That will only apply the margin to the “.gap” element, not it’s parent LI with the actual margin.

The CSS selector for the <li> is ol.wp-paginate li and can be used like so:

ol.wp-paginate li {
  margin: 0 !important;
}

Trouble is, that will target ALL <li> elements, not just the one containing the ellipses.

I can add a class to the li tag for the ellipse, ‘ellipse-gap’ and release a new version.

media screen and (max-width: 768px) {
  li.ellipse-gap {
    margin: 0 !important;
  }
}

The new version has been released.

Woops, sorry, missed this message.

Thanks very much for your help and doing that Alan ??