elementor / elementor/hello-theme
Add support for Breakpoints specified in Elementor to the Hello theme
- 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.