Navid Dev - Light/Dark Toggle

Fluid Scales for Elementor Pro

Use the button to quickly skip to the next scale

Type Scale
Space Scale
Content Scale

Fluid (Type) Scale

				
					
/* Font variables */
:root {
  --font-family: 'Poppins', Arial, sans-serif;
  --step--2: clamp(0.69rem, calc(0.66rem + 0.19vw), 0.88rem);
  --step--1: clamp(0.83rem, calc(0.78rem + 0.27vw), 1.10rem);
  --step-0: clamp(1.00rem, calc(0.93rem + 0.38vw), 1.38rem);
  --step-1: clamp(1.20rem, calc(1.10rem + 0.52vw), 1.72rem);
  --step-2: clamp(1.44rem, calc(1.30rem + 0.71vw), 2.15rem);
  --step-3: clamp(1.73rem, calc(1.54rem + 0.96vw), 2.69rem);
  --step-4: clamp(2.07rem, calc(1.82rem + 1.28vw), 3.36rem);
  --step-5: clamp(2.49rem, calc(2.15rem + 1.71vw), 4.20rem);
  --step-6: clamp(2.99rem, calc(2.53rem + 2.26vw), 5.25rem);
}

/* Fluid type scale */
body {
  font-family: var(--font-family);
  font-size: var(--step-0);
  line-height: 1.5;
  color: #c2c2c2;
}

h1, h2, h3, h4, h5, h6,
.pricing-table .pricing-column .pricing-header,
.elementor-testimonial__title,
.elementor-counter .elementor-counter-number-wrapper,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-posts .elementor-post__title,
.elementor-portfolio .elementor-image-box .elementor-image-box-title,
.elementor-accordion .elementor-accordion-title,
.elementor-form .elementor-field-label,
.elementor-toggle .elementor-toggle-title {
  font-size: var(--step-1);
  line-height: 1.5;
  font-weight: 700;
  color: #FB8500;
}

p,
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-wp-widget .widget p {
  font-size: var(--step-0);
  line-height: 1.5;
  font-weight: 400;
  color: #c2c2c2;
}

h1, .elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--step-5);
  line-height: 1.2;
}

h2, .elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--step-3);
  line-height: 1.3;
}

h3, .elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--step-2);
  line-height: 1.4;
}

h4, .elementor-widget-heading h4.elementor-heading-title {
  font-size: var(--step-1);
  line-height: 1.5;
}

h5, .elementor-widget-heading h5.elementor-heading-title {
  font-size: var(--step--1);
  line-height: 1.6;
}

h6, .elementor-widget-heading h6.elementtor-heading-title {
font-size: var(--step--2);
line-height: 1.7;
}

/* Fluid type scale for small screens */
@media (max-width: 767px) {
h1, h2, h3, h4, h5, h6,
.pricing-table .pricing-column .pricing-header,
.elementor-testimonial__title,
.elementor-counter .elementor-counter-number-wrapper,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-posts .elementor-post__title,
.elementor-portfolio .elementor-image-box .elementor-image-box-title,
.elementor-accordion .elementor-accordion-title,
.elementor-form .elementor-field-label,
.elementor-toggle .elementor-toggle-title {
font-size: var(--step-2);
line-height: 1.4;
font-weight: 700;
color: #FB8500;
}

p,
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-wp-widget .widget p {
font-size: var(--step-0);
line-height: 1.5;
font-weight: 400;
color: #c2c2c2;
}

h1, .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--step-4);
line-height: 1.3;
}

h2, .elementor-widget-heading h2.elementor-heading-title {
font-size: var(--step-3);
line-height: 1.4;
}

h3, .elementor-widget-heading h3.elementor-heading-title {
font-size: var(--step-2);
line-height: 1.5;
}

h4, .elementor-widget-heading h4.elementor-heading-title {
font-size: var(--step-1);
line-height: 1.6;
}

h5, .elementor-widget-heading h5.elementor-heading-title {
font-size: var(--step--1);
line-height: 1.7;
}

h6, .elementor-widget-heading h6.elementor-heading-title {
font-size: var(--step--2);
line-height: 1.8;
}
}

/* Fluid type scale for medium screens */
@media (min-width: 768px) and (max-width: 1023px) {
h1, h2, h3, h4, h5, h6,
.pricing-table .pricing-column .pricing-header,
.elementor-testimonial__title,
.elementor-counter .elementor-counter-number-wrapper,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-posts .elementor-post__title,
.elementor-portfolio .elementor-image-box .elementor-image-box-title,
.elementor-accordion .elementor-accordion-title,
.elementor-form .elementor-field-label,
.elementor-toggle .elementor-toggle-title {
font-size: var(--step-3);
line-height: 1.3;
font-weight: 700;
color: #FB8500;
}

p,
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-wp-widget .widget p {
font-size: var(--step-0);
line-height: 1.5;
font-weight: 400;
color: #c2c2c2;
}

h1, .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--step-5);
line-height: 1.2;
}

h2, .elementor-widget-heading h2.elementor-heading-title {
font-size: var(--step-3);
line-height: 1.3;
}

h3, .elementor-widget-heading h3.elementor-heading-title {
font-size: var(--step-2);
line-height: 1.4;
}

h4, .elementor-widget-heading h4.elementor-heading-title {
font-size: var(--step-1);
line-height: 1.5;
}

h5, .elementor-widget-heading h5.elementor-heading-title {
font-size: var(--step--1);
line-height: 1.6;
}

h6, .elementor-widget-heading h6.elementor-heading-title {
font-size: var(--step--2);
line-height: 1.7;
}
}

/* Fluid type scale for large screens */
@media (min-width: 1024px) {
h1, h2, h3, h4, h5, h6,
.pricing-table .pricing-column .pricing-header,
.elementor-testimonial__title,
.elementor-counter .elementor-counter-number-wrapper,
.elementor-image-box-title,
.elementor-icon-box-title,
.elementor-posts .elementor-post__title,
.elementor-portfolio .elementor-image-box .elementor-image-box-title,
.elementor-accordion .elementor-accordion-title,
.elementor-form .elementor-field-label,
.elementor-toggle .elementor-toggle-title {
font-size: var(--step-4);
line-height: 1.3;
font-weight: 700;
color: #FB8500;
}

p,
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-wp-widget .widget p {
font-size: var(--step-0);
line-height: 1.5;
font-weight: 400;
color: #c2c2c2;
}

h1, .elementor-widget-heading h1.elementor-heading-title {
font-size: var(--step-6);
line-height: 1.2;
}

h2, .elementor-widget-heading h2.elementor-heading-title {
font-size: var(--step-4);
line-height: 1.3;
}

h3, .elementor-widget-heading h3.elementor-heading-title {
font-size: var(--step-3);
line-height: 1.4;
}

h4, .elementor-widget-heading h4.elementor-heading-title {
font-size: var(--step-2);
line-height: 1.5;
}

h5, .elementor-widget-heading h5.elementor-heading-title {
font-size: var(--step--1);
line-height: 1.6;
}

h6, .elementor-widget-heading h6.elementor-heading-title {
font-size: var(--step--2);
line-height: 1.7;
}
}
/* This code defines a fluid type scale and spacing system for use in Elementor Pro, a popular page builder plugin for WordPress.

The spacing system uses the CSS clamp function and rem units to provide a fluid range of spacing values that can adapt to different screen sizes. The :root selector is used to define a set of custom properties, each representing a different spacing value, from --space-3xs to --space-3xl, as well as some custom pairs.

The font scale also uses the clamp function and rem units to provide a fluid range of font sizes that can adapt to different screen sizes. The :root selector is used to define a set of custom properties, each representing a different font size, from --step--2 to --step-6.

The CSS code also includes media queries to adjust the font sizes and spacing values for different screen sizes. For example, the font sizes for headings and paragraphs are adjusted for small, medium, and large screens. The font-weight and color properties are also added to headings and paragraphs for more customization.

Overall, this code helps to create a consistent and visually pleasing design across different devices and screen sizes. */

Fluid (Space) Scale

				
					
.e-con {
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.13vw), 0.38rem);
  --space-2xs: clamp(0.50rem, calc(0.46rem + 0.19vw), 0.69rem);
  --space-xs: clamp(0.75rem, calc(0.69rem + 0.31vw), 1.06rem);
  --space-s: clamp(1.00rem, calc(0.93rem + 0.38vw), 1.38rem);
  --space-m: clamp(1.50rem, calc(1.39rem + 0.56vw), 2.06rem);
  --space-l: clamp(2.00rem, calc(1.85rem + 0.75vw), 2.75rem);
  --space-xl: clamp(3.00rem, calc(2.78rem + 1.13vw), 4.13rem);
  --space-2xl: clamp(4.00rem, calc(3.70rem + 1.50vw), 5.50rem);
  --space-3xl: clamp(6.00rem, calc(5.55rem + 2.25vw), 8.25rem);
  --space-3xs-2xs: clamp(0.25rem, calc(0.16rem + 0.44vw), 0.69rem);
  --space-2xs-xs: clamp(0.50rem, calc(0.39rem + 0.56vw), 1.06rem);
  --space-xs-s: clamp(0.75rem, calc(0.63rem + 0.63vw), 1.38rem);
  --space-s-m: clamp(1.00rem, calc(0.79rem + 1.06vw), 2.06rem);
  --space-m-l: clamp(1.50rem, calc(1.25rem + 1.25vw), 2.75rem);
  --space-l-xl: clamp(2.00rem, calc(1.58rem + 2.13vw), 4.13rem);
  --space-xl-2xl: clamp(3.00rem, calc(2.50rem + 2.50vw), 5.50rem);
  --space-2xl-3xl: clamp(4.00rem, calc(3.15rem + 4.25vw), 8.25rem);
  --space-s-l: clamp(1.00rem, calc(0.65rem + 1.75vw), 2.75rem);
}

.e-con > * {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.e-con > :first-child {
  margin-top: 0;
}

.e-con > :last-child {
  margin-bottom: 0;
}

.e-con > .elementor-widget:last-child {
  margin-bottom: var(--space-l);
}

@media (min-width: 768px) {
  .e-con > * {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
  }
}

@media (min-width: 1024px) {
  .e-con > * {
    margin-top: var(--space-m);
    margin-bottom: var(--space-m);
  }

.e-con > .elementor-widget:last-child {
margin-bottom: var(--space-xl);
}
}

@media (min-width: 1280px) {
.e-con > * {
margin-top: var(--space-l);
margin-bottom: var(--space-l);
}

.e-con > .elementor-widget:last-child {
margin-bottom: var(--space-2xl);
}
}

@media (min-width: 1440px) {
.e-con > * {
margin-top: var(--space-xl);
margin-bottom: var(--space-xl);
}

.e-con > .elementor-widget:last-child {
margin-bottom: var(--space-3xl);
}
}


/*

Explanation:
- `.e-con` is used as the selector for the container.
- `--space-3xs` to `--space-s-l` are defined as custom properties with values that use `clamp()` and `calc()` functions to create fluid spacing values.
- `margin-top` and `margin-bottom` are set to `var(--space-xs)` for all direct children of `.e-con`, which sets the default spacing between elements.
- `margin-top` is set to `0` for the first child element to remove any unnecessary top spacing.
- `margin-bottom` is set to `0` for the last child element to remove any unnecessary bottom spacing.
- `.e-widget:last-child` is used as a selector to target the last child element if it has the class `e-widget`. This is used to add extra bottom spacing to the last widget in the container.
- Media queries are used to change the spacing values based on the viewport width, creating a fluid design.
- The spacing values increase as the viewport width increases, creating a sense of hierarchy in the layout.

Note: This code assumes that the Elementor Pro container uses the class `.e-con` and that the last child widget has the class `.e-widget`. You may need to adjust these selectors if they are different in your specific use case.

*/

Fluid (Content) Scale

				
					
/* Ultra wide */
@media (max-width: 3840px) {
.e-con {--content-width: 65%;}}
/* Desktop */
@media (max-width: 1920px) {
.e-con {--content-width: 75%;}}
/* Laptop big */
@media (max-width: 1600px) {
.e-con {--content-width: 84%;}}
/* Laptop small */
@media (max-width: 1366px) {
.e-con {--content-width: 87%;}}
/* Tablet portrait */
@media (max-width: 1200px) {
.e-con {--content-width: 90%;}}
/* Mobile */
@media (max-width: 767px) {
.e-con {--content-width: 95%;}}

Add Your Heading Text Here

Add Your Heading Text Here

Add Your Heading Text Here

Add Your Heading Text Here

Add Your Heading Text Here
Add Your Heading Text Here

Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.

Click here
Click here