Question

I am frustrated 🙁 I have been sick for a while and now “happy new years” my customer calls me to let me know that the pager of the gallery on his website is broken.

I have been able to fix most of it and get the style back as it was, however I can get it to display horizontally as it should be.

There isnt much code involved, but whatever I try I either break it all-together (for instance changing the “display:block” or it stays vertical

.go-gallery img,
.go-gallery a { border: none; display: block; margin: 0; padding: 0; }

.go-gallery.gog-dots { padding: 0 0px; position: relative; }
.go-gallery.gog-dots .pager {background: rgba(0,0,0,.6);left: 20px;padding: 5px         10px;position: absolute;top: 352px;z-index: 999; height:20px;}
.go-gallery.has-pager .pager {left: 0px;}
.go-gallery.gog-dots 
.pager a {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:   3px;background: #969696;height: 0;overflow: hidden;outline:     none;padding: 6px 0 0 0;width: 6px; margin-top:6px;}.go-gallery.gog-dots .pager a.activeSlide { background: #fff;}
.go-gallery.gog-dots .pager a:first-child { margin: 0; margin-top:6px;}

Answer 1

Just float your pager elements to the left and add some margin between them, like so:

.go-gallery.gog-dots .pager a {
  float:left;
  margin:6px 10px 0;
}

Also, comment out this line so your first element stacks correctly like the rest.

.go-gallery.gog-dots .pager a:first-child { ... }