Menu icon Foundation
Orbit Bullet position on iPad

Does anyone know why the bullet nav for orbit is positioned center for desktop browsing, but on the iPad the bullets jump to left-aligned. It also does this on foundation's orbit page, so I know it shouldn't be anything wrong with my code.

Here is the link to my site: http://sbannigan.com/catalog/

Orbitipadnavnavigtion

Does anyone know why the bullet nav for orbit is positioned center for desktop browsing, but on the iPad the bullets jump to left-aligned. It also does this on foundation's orbit page, so I know it shouldn't be anything wrong with my code.

Here is the link to my site: http://sbannigan.com/catalog/

This post has been closed. No new replies can be added.

Martyn James about 5 years ago

I'm having the same problem. It's not related to breakpoints either, as it doesn't happen when reducing browser size on the desktop.

Anyone??

Martyn James about 5 years ago

OK - found the issue. Mobile devices get the class 'touch' added, and .touch .orbit-bullets has display:none overriding display:table.

Add this line to your override CSS to fix:

.orbit-bullets, .touch .orbit-bullets{
display: table;
text-align: center;
}

Caleb Winters about 5 years ago

@Martyn thanks for this, we'll add this to our update queue so this problem will be solved in a future release.