Clickfunnels CSS Snippets

Clickfunnels CSS Snippets.md

Introduction

This is a series of code snippets that will help you customize your Clickfunnels pages with CSS code.

Instructions

Each one of the files below contains a different snippet of code that does a specific thing. Everything inside the /* and /* is a comment.

Once you find the snippet that does what you want to achieve, just copy the entire thing and paste it into your "SETTINGS > CUSTOM CSS" in your funnel step.

full-width-all-rows.css

/**
 * Make all rows in a page span the full width of the screen
 */
.containerInner {
	width: 100% !important;
}

/* Code by https://christiancisneros.me */

full-width-row.css

/**
 * Make a row inside a specific section to be full width
 */
#SECTION-ID .containerInner {
	width: 100% !important;
}

/* Code by https://christiancisneros.me */

remove-grammarly-code.css

/**
 * The Grammarly extension adds some weird spacing and numbers in the pages, this code gets rid of those
 */
grammarly-btn { display: none !important; }

section-overlay.css

/**
 * Add a color overlay above your background in any specific section
 */
#SECTION-ID {
	position: relative;
}

#SECTION-ID:before {
  	position: absolute;
  	display: block;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	content: '';
  	background: YOUR_COLOR;
}

/**
 * Comment: YOUR_COLOR needs to be in rgba format, like this: 
 * 
 * rgba(0, 0, 0, .85)
 *
 * The last number (.85) is the opacity of your overlay. You 
 * can use any number from 0 to 1, the higher the number, the
 * more opaque the overlay.
 * 
 */

/* Code by https://christiancisneros.me */