Issues with full-width display in Design Editor (landing pages)
I'm trying to create a responsive landing page template in the Design Editor that allows for full-width banners and feature sections, but for text sections is otherwise limited to a set width. I've been working my way through this using a combo of the Additional CSS box under Advanced Styles and some trial and error with the Design Editor's columns.
What I'm finding is that when setting the page with to full-width, the Design Editor doesn't provide that good of an approximation of how the page will look when using the page URL in the browser, as it seems the Design Editor limits the width to roughly 1400 pixels, and as the columns are percentages, the width varies accordingly, so text content appears longer, and images can be skewed.
In addition, when entering media queries in the Design Editor's Additional CSS box, this doesn't seem to display when switching between desktop and mobile view, e.g. centering text in mobile mode, or having different <div> widths doesn't seem to display. The Design Editor also seems to struggle with Flexbox and a couple of other 'newer' CSS features.
Has anybody had any experience with this, and were they able to solve it? Is there a way of 'tricking' the Design Editor into displaying pages correctly, perhaps by scaling down the content, or adding CSS classes particular to the Design Editor that will not affect the 'real' page?
I really want to get this looking as accurate as possible, as the rest of the team won't be able to design pages using the Source Editor.