elementor / elementor/elementor

⛔ 🐞 Full-width Container with Boxed Container margins

Open
#24,259 0 comments 0 reactions 0 assignees View on GitHub
component/code element/container mod/c* mod/e* type/layout type/styles
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Prerequisites

- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.

### Description

This isn't exactly an issue or a feature request. I'd classify this more of a suggestion.

Boxed `containers` within full-width `containers` use `margin: 0 auto;` to centre themselves to the middle. However, `containers` are all set as `display: flex;` and setting `margin: 0 auto;` on the boxed `container` doesn't make sense when the boxed `container` could use `align-items` to center (e.g. `align-items: center;`). There should technically speaking be two different `align-items` controls on the containers: one for the `.e-con-inner` and the other would control the containers within `.e-con-inner`.

### Steps to reproduce

1) Add a Container and set to `full-width`
2) Add Container to the full-width Container and leave it as `boxed`
3) Add the below CSS to the **boxed** container:
```
selector {
align-items: center;
}

selector > .e-con-inner {
margin: 0;
}
```

### Isolating the problem

- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [X] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently following the steps above.

### System Info

Not necessary as the above is just a suggestion and not a bug

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.