I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken.
Although I managed to fix most of it and restore the original style, I'm struggling to get it to display horizontally as intended.
The code involved isn't too complex, but every attempt I make seems to either break everything (like changing "display: block") or keep it in a vertical layout.
.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;}