Jump to content

Help with custom font size on index items

Go to solution Solved by tuanphan,

Recommended Posts

Hi guys, I need some help with subtitle code I've added to my index items! I've added in the below code to add a subtitle to my index items and I'm happy with how it looks on desktop but when I look it on mobile the subtile is a bit too big! Any help would be much appreciated!

/*general config for subtitle*/
.index-section .index-item-title:after {
  color: #FFFFFF;
  display: block;
  font-weight: lighter;
  font-size: 20px;
}

@media screen and (max-width: 640px) {
h2.item-pagination-title.preFade.fadeIn {
    font-size: 0.8rem;
}
}

/*set content for subtitle item*/
.index-section:nth-child(1) .index-item-title:after {
  content: 'DISCOVER MORE';
}

.index-section:nth-child(2) .index-item-title:after {
  content: 'DISCOVER MORE';
}

.index-section:nth-child(3) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(4) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(5) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(6) .index-item-title:after {
  content: 'DISCOVER MORE';
  }
.index-section:nth-child(7) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(7) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(8) .index-item-title:after {
  content: 'DISCOVER MORE';
  }
.index-section:nth-child(9) .index-item-title:after {
  content: 'DISCOVER MORE';
  }
.index-section:nth-child(10) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(11) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(12) .index-item-title:after {
  content: 'DISCOVER MORE';
  }
.index-section:nth-child(13) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

.index-section:nth-child(14) .index-item-title:after {
  content: 'DISCOVER MORE';
  }

Link to comment
  • Solution

Add this code under

@media screen and (max-width:640px) {
.index-section .index-item-title:after {
	font-size: 12px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.