File: /var/www/html/wp-content/themes/page-builder-framework/assets/scss/responsive/_responsive.scss
/* From 481 | Phone Landscape & Bigger */
@media (min-width: $breakpoint0 + 1) {
/* Grid */
.wpbf-grid-small-1-1 > * {
width: 100%;
}
.wpbf-grid-small-1-2 > * {
width: 50%;
}
.wpbf-grid-small-1-3 > * {
width: 33.333%;
}
.wpbf-grid-small-2-3 > * {
width: 66.666%;
}
.wpbf-grid-small-1-4 > * {
width: 25%;
}
.wpbf-grid-small-1-5 > * {
width: 20%;
}
.wpbf-grid-small-1-6 > * {
width: 16.666%;
}
.wpbf-grid-small-1-10 > * {
width: 10%;
}
/* Grid Cells */
// Whole
.wpbf-small-1-1 {
width: 100%;
}
// Halves
.wpbf-small-1-2,
.wpbf-small-2-4,
.wpbf-small-3-6,
.wpbf-small-5-10 {
width: 50%;
}
// Thirds
.wpbf-small-1-3,
.wpbf-small-2-6 {
width: 33.333%;
}
.wpbf-small-2-3,
.wpbf-small-4-6 {
width: 66.666%;
}
// Quarters
.wpbf-small-1-4 {
width: 25%;
}
.wpbf-small-3-4 {
width: 75%;
}
// Fifths
.wpbf-small-1-5,
.wpbf-small-2-10 {
width: 20%;
}
.wpbf-small-2-5,
.wpbf-small-4-10 {
width: 40%;
}
.wpbf-small-3-5,
.wpbf-small-6-10 {
width: 60%;
}
.wpbf-small-4-5,
.wpbf-small-8-10 {
width: 80%;
}
// Sixths
.wpbf-small-1-6 {
width: 16.666%;
}
.wpbf-small-5-6 {
width: 83.333%;
}
// Tenths
.wpbf-small-1-10 {
width: 10%;
}
.wpbf-small-3-10 {
width: 30%;
}
.wpbf-small-7-10 {
width: 70%;
}
.wpbf-small-9-10 {
width: 90%;
}
}
/* From 769 | Tablet & Bigger */
@media (min-width: $breakpoint1 + 1) {
/* Gutenberg */
// Wide Aligned Images
.wpbf-no-sidebar .alignwide {
margin-left: -50px;
margin-right: -50px;
max-width: unset;
width: auto;
}
// Sidebar
.wpbf-grid-divider > [class*='wpbf-medium-']:not(.wpbf-medium-1-1):nth-child(n+2) {
border-left: 1px solid $base-color;
}
/* Grid */
.wpbf-grid-medium-1-1 > * {
width: 100%;
}
.wpbf-grid-medium-1-2 > * {
width: 50%;
}
.wpbf-grid-medium-1-3 > * {
width: 33.333%;
}
.wpbf-grid-medium-2-3 > * {
width: 66.666%;
}
.wpbf-grid-medium-1-4 > * {
width: 25%;
}
.wpbf-grid-medium-1-5 > * {
width: 20%;
}
.wpbf-grid-medium-1-6 > * {
width: 16.666%;
}
.wpbf-grid-medium-1-10 > * {
width: 10%;
}
/* Grid Cells */
// Whole
.wpbf-medium-1-1 {
width: 100%;
}
// Halves
.wpbf-medium-1-2,
.wpbf-medium-2-4,
.wpbf-medium-3-6,
.wpbf-medium-5-10 {
width: 50%;
}
// Thirds
.wpbf-medium-1-3,
.wpbf-medium-2-6 {
width: 33.333%;
}
.wpbf-medium-2-3,
.wpbf-medium-4-6 {
width: 66.666%;
}
// Quarters
.wpbf-medium-1-4 {
width: 25%;
}
.wpbf-medium-3-4 {
width: 75%;
}
// Fifths
.wpbf-medium-1-5,
.wpbf-medium-2-10 {
width: 20%;
}
.wpbf-medium-2-5,
.wpbf-medium-4-10 {
width: 40%;
}
.wpbf-medium-3-5,
.wpbf-medium-6-10 {
width: 60%;
}
.wpbf-medium-4-5,
.wpbf-medium-8-10 {
width: 80%;
}
// Sixths
.wpbf-medium-1-6 {
width: 16.666%;
}
.wpbf-medium-5-6 {
width: 83.333%;
}
// Tenths
.wpbf-medium-1-10 {
width: 10%;
}
.wpbf-medium-3-10 {
width: 30%;
}
.wpbf-medium-7-10 {
width: 70%;
}
.wpbf-medium-9-10 {
width: 90%;
}
}
/* From 1025 | Desktop & Bigger */
@media (min-width: $breakpoint2 + 1) {
/* Gutenberg */
// Wide Aligned Images
.wpbf-no-sidebar .alignwide {
margin-left: -75px;
margin-right: -75px;
}
/* Sidebar */
.wpbf-grid-divider > [class*='wpbf-large-']:not(.wpbf-large-1-1):nth-child(n+2) {
border-left: 1px solid $base-color;
}
/* Grid */
.wpbf-grid-large-1-1 > * {
width: 100%;
}
.wpbf-grid-large-1-2 > * {
width: 50%;
}
.wpbf-grid-large-1-3 > * {
width: 33.333%;
}
.wpbf-grid-large-2-3 > * {
width: 66.666%;
}
.wpbf-grid-large-1-4 > * {
width: 25%;
}
.wpbf-grid-large-1-5 > * {
width: 20%;
}
.wpbf-grid-large-1-6 > * {
width: 16.666%;
}
.wpbf-grid-large-1-10 > * {
width: 10%;
}
/* Grid Cells */
// Whole
.wpbf-large-1-1 {
width: 100%;
}
/* Halves */
.wpbf-large-1-2,
.wpbf-large-2-4,
.wpbf-large-3-6,
.wpbf-large-5-10 {
width: 50%;
}
// Thirds
.wpbf-large-1-3,
.wpbf-large-2-6 {
width: 33.333%;
}
.wpbf-large-2-3,
.wpbf-large-4-6 {
width: 66.666%;
}
// Quarters
.wpbf-large-1-4 {
width: 25%;
}
.wpbf-large-3-4 {
width: 75%;
}
// Fifths
.wpbf-large-1-5,
.wpbf-large-2-10 {
width: 20%;
}
.wpbf-large-2-5,
.wpbf-large-4-10 {
width: 40%;
}
.wpbf-large-3-5,
.wpbf-large-6-10 {
width: 60%;
}
.wpbf-large-4-5,
.wpbf-large-8-10 {
width: 80%;
}
// Sixths
.wpbf-large-1-6 {
width: 16.666%;
}
.wpbf-large-5-6 {
width: 83.333%;
}
// Tenths
.wpbf-large-1-10 {
width: 10%;
}
.wpbf-large-3-10 {
width: 30%;
}
.wpbf-large-7-10 {
width: 70%;
}
.wpbf-large-9-10 {
width: 90%;
}
}
/* From 1200 | Large Screen & Bigger */
@media (min-width: $breakpoint3 + 1) {
/* Grid */
.wpbf-grid-xlarge-1-1 > * {
width: 100%;
}
.wpbf-grid-xlarge-1-2 > * {
width: 50%;
}
.wpbf-grid-xlarge-1-3 > * {
width: 33.333%;
}
.wpbf-grid-xlarge-2-3 > * {
width: 66.666%;
}
.wpbf-grid-xlarge-1-4 > * {
width: 25%;
}
.wpbf-grid-xlarge-1-5 > * {
width: 20%;
}
.wpbf-grid-xlarge-1-6 > * {
width: 16.666%;
}
.wpbf-grid-xlarge-1-10 > * {
width: 10%;
}
/* Grid Cells */
// Whole
.wpbf-xlarge-1-1 {
width: 100%;
}
// Halves
.wpbf-xlarge-1-2,
.wpbf-xlarge-2-4,
.wpbf-xlarge-3-6,
.wpbf-xlarge-5-10 {
width: 50%;
}
// Thirds
.wpbf-xlarge-1-3,
.wpbf-xlarge-2-6 {
width: 33.333%;
}
.wpbf-xlarge-2-3,
.wpbf-xlarge-4-6 {
width: 66.666%;
}
// Quarters
.wpbf-xlarge-1-4 {
width: 25%;
}
.wpbf-xlarge-3-4 {
width: 75%;
}
// Fifths
.wpbf-xlarge-1-5,
.wpbf-xlarge-2-10 {
width: 20%;
}
.wpbf-xlarge-2-5,
.wpbf-xlarge-4-10 {
width: 40%;
}
.wpbf-xlarge-3-5,
.wpbf-xlarge-6-10 {
width: 60%;
}
.wpbf-xlarge-4-5,
.wpbf-xlarge-8-10 {
width: 80%;
}
// Sixths
.wpbf-xlarge-1-6 {
width: 16.666%;
}
.wpbf-xlarge-5-6 {
width: 83.333%;
}
// Tenths
.wpbf-xlarge-1-10 {
width: 10%;
}
.wpbf-xlarge-3-10 {
width: 30%;
}
.wpbf-xlarge-7-10 {
width: 70%;
}
.wpbf-xlarge-9-10 {
width: 90%;
}
}
/* Until 1200 */
@media screen and (max-width:$breakpoint3) {
/* Margin */
.wpbf-margin-xlarge {
margin-top: $margin-large;
margin-bottom: $margin-large;
}
.wpbf-margin-xlarge-top {
margin-top: $margin-large;
}
.wpbf-margin-xlarge-bottom {
margin-bottom: $margin-large;
}
.wpbf-margin-xlarge-left {
margin-left: $margin-large;
}
.wpbf-margin-xlarge-right {
margin-right: $margin-large;
}
/* Padding */
.wpbf-padding-xlarge {
padding-top: $padding-large;
padding-bottom: $padding-large;
}
.wpbf-padding-xlarge-top {
padding-top: $padding-large;
}
.wpbf-padding-xlarge-bottom {
padding-bottom: $padding-large;
}
.wpbf-padding-xlarge-left {
padding-left: $padding-large;
}
.wpbf-padding-xlarge-right {
padding-right: $padding-large;
}
}
/* Until 1024 */
@media screen and (max-width:$breakpoint2) {
/* Margin */
.wpbf-margin-large, .wpbf-margin-xlarge {
margin-top: $margin-medium;
margin-bottom: $margin-medium;
}
.wpbf-margin-large-top {
margin-top: $margin-medium;
}
.wpbf-margin-large-bottom {
margin-bottom: $margin-medium;
}
.wpbf-margin-large-left {
margin-left: $margin-medium;
}
.wpbf-margin-large-right {
margin-right: $margin-medium;
}
.wpbf-margin-xlarge-top {
margin-top: $margin-medium;
}
.wpbf-margin-xlarge-bottom {
margin-bottom: $margin-medium;
}
.wpbf-margin-xlarge-left {
margin-left: $margin-medium;
}
.wpbf-margin-xlarge-right {
margin-right: $margin-medium;
}
/* Padding */
.wpbf-padding-large, .wpbf-padding-xlarge {
padding-top: $padding-medium;
padding-bottom: $padding-medium;
}
.wpbf-padding-large-top {
padding-top: $padding-medium;
}
.wpbf-padding-large-bottom {
padding-bottom: $padding-medium;
}
.wpbf-padding-large-left {
padding-left: $padding-medium;
}
.wpbf-padding-large-right {
padding-right: $padding-medium;
}
.wpbf-padding-xlarge-top {
padding-top: $padding-medium;
}
.wpbf-padding-xlarge-bottom {
padding-bottom: $padding-medium;
}
.wpbf-padding-xlarge-left {
padding-left: $padding-medium;
}
.wpbf-padding-xlarge-right {
padding-right: $padding-medium;
}
}
/* Until 768 */
@media screen and (max-width:$breakpoint1) {
/* General */
// Pre Header / Footer
.wpbf-footer-two-columns,
.wpbf-pre-header-two-columns {
display: block;
.wpbf-inner-footer-left,
.wpbf-inner-footer-right,
.wpbf-inner-pre-header-left,
.wpbf-inner-pre-header-right {
display: block;
width: 100%;
text-align: center;
}
}
// Right Navigation
.wpbf-page-footer {
.wpbf-inner-footer-right {
.wpbf-menu {
float: none;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
}
// Left Navigation
.wpbf-page-footer {
.wpbf-inner-footer-left {
.wpbf-menu {
float: none;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
}
}
/* Until 480 */
@media screen and (max-width:$breakpoint0) {
/* Margin */
.wpbf-margin-medium, .wpbf-margin-large, .wpbf-margin-xlarge {
margin-top: $margin;
margin-bottom: $margin;
}
.wpbf-margin-large-top {
margin-top: $margin;
}
.wpbf-margin-large-bottom {
margin-bottom: $margin;
}
.wpbf-margin-large-left {
margin-left: $margin;
}
.wpbf-margin-large-right {
margin-right: $margin;
}
.wpbf-margin-medium-top {
margin-top: $margin;
}
.wpbf-margin-medium-bottom {
margin-bottom: $margin;
}
.wpbf-margin-medium-left {
margin-left: $margin;
}
.wpbf-margin-medium-right {
margin-right: $margin;
}
.wpbf-margin-xlarge-top {
margin-top: $margin;
}
.wpbf-margin-xlarge-bottom {
margin-bottom: $margin;
}
.wpbf-margin-xlarge-left {
margin-left: $margin;
}
.wpbf-margin-xlarge-right {
margin-right: $margin;
}
/* Padding */
.wpbf-padding-medium, .wpbf-padding-large, .wpbf-padding-xlarge {
padding-top: $padding;
padding-bottom: $padding;
}
.wpbf-padding-large-top {
padding-top: $padding;
}
.wpbf-padding-large-bottom {
padding-bottom: $padding;
}
.wpbf-padding-large-left {
padding-left: $padding;
}
.wpbf-padding-large-right {
padding-right: $padding;
}
.wpbf-padding-medium-top {
padding-top: $padding;
}
.wpbf-padding-medium-bottom {
padding-bottom: $padding;
}
.wpbf-padding-medium-left {
padding-left: $padding;
}
.wpbf-padding-medium-right {
padding-right: $padding;
}
.wpbf-padding-xlarge-top {
padding-top: $padding;
}
.wpbf-padding-xlarge-bottom {
padding-bottom: $padding;
}
.wpbf-padding-xlarge-left {
padding-left: $padding;
}
.wpbf-padding-xlarge-right {
padding-right: $padding;
}
}
/* Visibility */
/* Desktop and bigger */
@media (min-width: $breakpoint2 + 1) {
.wpbf-visible-small {
display: none !important;
}
.wpbf-visible-medium {
display: none !important;
}
.wpbf-hidden-large {
display: none !important;
}
}
/* Tablets portrait */
@media (min-width: $breakpoint1 + 1) and (max-width: $breakpoint2) {
.wpbf-visible-small {
display: none !important;
}
.wpbf-visible-large {
display: none !important ;
}
.wpbf-hidden-medium {
display: none !important;
}
}
/* Tablets */
@media (max-width: $breakpoint1) {
.wpbf-visible-medium {
display: none !important;
}
.wpbf-visible-large {
display: none !important;
}
.wpbf-hidden-small {
display: none !important;
}
}