elementor / elementor/hello-theme

Add support for Breakpoints specified in Elementor to the Hello theme

Open
#183 0 comments 4 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
612
Forks
239
Avg merge
12h 5m
Merged PRs (30d)
19

Description

In _Elemntor Pro_, you can specify a breakpoint width that affects the **.elementor-container**.

Right now, the _Hello theme_ has breakpoints that are hardcoded into the style. If you change the breakpoints in _Elementor Pro_, it will have no effect on the _theme_.

Here's what those theme CSS lines look like:

```
@media (min-width:576px) {
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*=elementor-page-]) .site-main {
max-width: 500px
}
.site-footer.footer-full-width .footer-inner,
.site-header.header-full-width .header-inner {
max-width: 100%
}
}

@media (min-width:768px) {
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*=elementor-page-]) .site-main {
max-width: 600px
}
.site-footer.footer-full-width,
.site-header.header-full-width {
max-width: 100%
}
}

@media (min-width:992px) {
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*=elementor-page-]) .site-main {
max-width: 800px
}
.site-footer.footer-full-width,
.site-header.header-full-width {
max-width: 100%
}
}

@media (min-width:1200px) {
.site-footer .footer-inner,
.site-footer:not(.dynamic-footer),
.site-header .header-inner,
.site-header:not(.dynamic-header),
body:not([class*=elementor-page-]) .site-main {
max-width: 960px
}
.site-footer .footer-inner,
.site-header .header-inner {
max-width: 1140px
}
.site-footer.footer-full-width,
.site-header.header-full-width {
max-width: 100%
}
}

```

Since the _Hello theme_ is designed to work in conjunction with _Elementor_, I propose to add passing breakpoints using variables.

For example, replace (CSS simplified, for clarity)

```
@media (min-width:1200px) {
.site-main {max-width: 1140px}
}
```

to

```
@media (min-width: var(--e-container-desktop-media-min-width) ) {
.site-main {max-width: 1140px;
max-width: var(--e-container-desktop-max-width) }
}
```

Make the appropriate variables in _Elementor_. If they are defined, the theme will adjust to these settings. If not, there will be a fallback.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.