Jump to content

Custom CSS for gallery controls

Recommended Posts

Site URL: https://www.buildingnarratives.co.uk/


My query refers to the gallery controls on the bottom left. I have set a width value of 80px for the block. I would like the same number of image numbers to display on each row.

Here's an example of the appearance I'd like to achieve on another site:


This is all the CSS pertaining to the gallery controls that I already have imputed:

#numberControls.gallery-controls {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 80px;
  height: auto;
  font-family: 'aktiv-grotesk';
  font-size: 12px;
  line-height: 1.75em;
  font-weight: 100 !important;
.number.sqs-active-slide {
  background: #1F1F1F;
  font-style: normal;
.number {
  font-size: 1em; 
  padding-left: 1px !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  padding-right: 0px !important;
  margin-right: 3px !important;
  margin-left: 0px !important;

As the margin and padding lines in ".number" work, I thought it just a be a matter of adding 'width: 12px;' to that section would do the trick. But no change. Can anyone show me where I'm going wrong?



Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.