Skip to content

Instantly share code, notes, and snippets.

@paullacey78
Last active August 13, 2022 15:43
Show Gist options
  • Save paullacey78/2c2c910a2620118a4cfbd44485663eb9 to your computer and use it in GitHub Desktop.
Save paullacey78/2c2c910a2620118a4cfbd44485663eb9 to your computer and use it in GitHub Desktop.
:root {
/* -- EDIT THE FOLLOWING VARIABLES TO ADUST GLOBAL ROW PADDING -- */
--bb-x-large: 5%;
--bb-large: 5%;
--bb-medium: 3%;
--bb-small: 20px;
}
/* x-large row padding */
@media(min-width:768px) {
.top .fl-row-content {
padding-top: var(--bb-x-large);
}
.bottom .fl-row-content {
padding-bottom: var(--bb-x-large);
}
.fl-row-content {
padding-left: var(--bb-small);
padding-right: var(--bb-small);
}
}
/* large row padding */
@media(min-width:768px) AND (max-width: 1200px) {
.top .fl-row-content {
padding-top: var(--bb-large);
}
.bottom .fl-row-content {
padding-bottom: var(--bb-large);
}
}
/* medium row padding */
@media(min-width:768px) AND (max-width: 992px) {
.top .fl-row-content {
padding-top: var(--bb-medium);
}
.bottom .fl-row-content {
padding-bottom: var(--bb-medium);
}
}
/* small row padding */
@media(max-width:768px) {
body .fl-row[data-node] .fl-row-content-wrap {
padding-left: var(--bb-small);
padding-right: var(--bb-small);
}
.fl-row[data-node].top .fl-row-content-wrap {
padding-top: var(--bb-small);
padding-bottom: 0;
}
.fl-row[data-node].bottom .fl-row-content-wrap {
padding-top: 0;
padding-bottom: var(--bb-small);
}
.fl-row[data-node].bottom.top .fl-row-content-wrap {
padding-top: var(--bb-small);
padding-bottom: var(--bb-small);
}
}
/* Column classes */
@media(min-width:1401px) {
.narrow .fl-col-content {
max-width: 992px;
margin-left: auto;
margin-right: auto;
}
}
@media(min-width:768px) {
.hero-left .fl-col-content {
max-width: calc(1200px/2.25);
margin-right: auto;
}
.hero-right .fl-col-content {
max-width: calc(1200px/2.25) !important;
margin-left: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment