Constrained layout – Max Width

Here is the actual css that controls max-width. Turning max width off in inspector and I see things correct. Settings it as above comment, forces 1280px to the entire site.

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

I am trying to force this to 1280px, but it compresses to 680px (Here max-width on and ugly). Below is a div inside the above and setting it to 1280px does nothing

div#wcfm-main-contentainer form {
	max-width: 100% !important;
}

Page is a frontend admin page, so I cannot share link. This is quite urgent thx.

Note: This is not an actual page I can FSE. I am aware of group container and width. This page is an admin frotend dash, that I need to hack to change and is-layout-constrained apparently is default 680px

• This reply was modified 2 months, 2 weeks ago by hebhansen.

Hi @hebhansen !

I am not entirely sure I understand the type of page that you’re working with in the example, but I can ask or suggest, rather, that you check your site styles that are set globally.

To do this, go to Appearance → Editor → Styles, then click on the pencil icon, and go to ‘Layout’ in the right sidebar which contains the ‘Styles’ settings.

From there, you can determine if there is a global layout set for the width of the site.

It usually looks like this. See here: https://d.pr/i/cRLxtn

You can try changing the unit from ‘px’ (pixel) to ‘vh’ and ‘vw’ – viewport height and viewport width respectively), at ‘Dimensions’. Then, you can change the number assigned to 100 for both, which would be 100 viewport height and 100 viewport width. This will occupy the entire space allotted for the screen size – 100% of the viewport height or width. Padding settings will be retained.

Pixel would tend to force the layout to be a specific pixel height/width, instead of filling the screen.

Hope this helps!

Hi @janmtm

I have 620px content and 1280 wide in styles (Default) I don’t want to change this globally. A plugin generates a template. That template get’s contained in 620 px as per default. How can I tell this page to display in 1280px? I have no FSE interface for the page as the page does not exist as a WP page. It get’s generated by the plugin and placed within the cofines of TT4 or other theme.

• Out of the box, this is what I see in 620px where content overwrapping and a mess
• It is designed for a cotainer of 1280px. I want to see this. How can I hack TT4 to display wide for this page?
• As metioned adding this css does the trick but globally and I assume this is default either TT4 or WP

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1280px;
}

Why and what happens here?. I don’t understand this code and structure

How can I change this so that only that page goes wide and not the site?

• I have this div inside the div containing above code where changes has no effect:

div#wcfm-main-contentainer form {
	max-width: 100% !important;
}

I tried this in css and it does nothing:

div#wcfm-main-contentainer form.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

What is the hook to get this done correctly in my childtheme, overwrite global styles and adress only this container?

I hope that’s more clear…..

Thx

Hi @hebhansen !

Thank you for the update and for clarifying.

If the template created by the plugin is set to use the default layout settings or default page layout settings of your theme, then it will indeed use the global settings.

You may want to, create a new template for your specific use. It would then be determined by that plugin’s documentation, or support guides on how to assign the new template that you create as the template in use for your specific case.

For Block themes, such as Twenty Twenty Four, the guide below outlines how you would go about creating your own templates, and how you could, if you want to, create and add php to that template.

This guide has a lot of information about ways of creating new templates from within the Editor itself, at Appearance →. Editor, when you have a Block theme active on your site:
https://www.ads-software.com/documentation/article/template-editor/

This guide outlines the process for creating a template file as well as inserting your template parts, for Block themes. It is more relevant when you may be looking into hand coding your template yourself:
https://developer.www.ads-software.com/themes/basics/template-files/

Hope this helps you get a little closer to where you’d like to be on things.

Aha, something else to consider @hebhansen !

If you decide to create your template in the Editor, you’ll want to ensure that for your main content area (Block), you disable the setting where it would use the site’s content width.

See here: https://d.pr/i/gpjxKG

If you leave that setting enabled in your template, it will mean that once again, the default content width will be used.

Hi @janmtm

Thx for the effort. I really appreciate it, but what I do need is one line of css that does the job. I just eed to define Divs and Classes to do so without attacking the entire site. For this a template for FSE is overkill, but it willl come in handy later for another project.

So please relate ro the code I posted above and any guidance is a great help. HTML structure shows in screendumps. I can’t get it to work so how?

div#wcfm-main-contentainer form.is-layout-constrained
or
.is-layout-constrained div#wcfm-main-contentainer form
or
div#wcfm-main-contentainer form .is-layout-constrained
or ................?

Plugin creates a permalink:

https://mysite.com/store-manager/

Magically the content of this location becomes frontend administration for anyone with the role priviledge.

I can check full page view, where theme is completely overwritten. Or I can uncheck and then this page shows within my theme TT4 with header and footer intact.

Can anyone explain this css and how to call it?:

 > :where(:not(.alignleft):not(.alignright):not(.alignfull))

Hi @hebhansen !

Let’s take a step back and I’ll explain it this way.

You’re trying to change something ‘after the fact’, that is being affected ‘before the fact’. The page is already inserted into a default template layout, so the only way to change that specific page is by changing the default, which means changing it globally.

It may make more sense in this scenario, since you would prefer not to create a new template and assign the page that’s being created to it from the plugin, to take another route instead. You could reach out to the plugin developers and ask them how to change how the page is created in the first case.

I do understand what you’re working with, but you won’t be able to force a change for a specific page that is already assigned to be nested inside a default layout which is controlled globally. I hope this clarifies things some more.

By adding this css I can overwrite WP/Theme/Plugin and get it to change to 1280px:

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1280px !important;
}

By adding this it does not work:

#wcfm-main-contentainer.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1280px !important;
}

Since this class resides within this div, why does it not work? Can I change the fork to get it there?

Does this styling come from WP or TT4 or Plugin?

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))

I have created a new template (Wide – 1280px) with title and content at 1280px and wide the same. How do I get this plugin output (Frontend Manager) into that template? Plugin outputs to here “https://mysite.com/store-manager/” and states that “changing this will crash the site”… In other words I cannot create a page having this slug unless this page handshakes correctly with that plugin.

Note: I cannot write PHP. I can hack css and html but not here apparently.

Also on a multisite, how do I get custom templates pushed to all sites?

Hey @hebhansen !

I’m happy that you were able to create a new template!

How do I get this plugin output (Frontend Manager) into that template? Plugin outputs to here “https://mysite.com/store-manager/” and states that “changing this will crash the site”… In other words I cannot create a page having this slug unless this page handshakes correctly with that plugin.

The question that you have here, continues to be one for the support team of the plugin that is generating that output (Frontend Manager).

For your previous but related question about the CSS not applying, it is because the class, .is-layout-constrained is a class for a div that comes before #wcfm-main-contentainer so it cannot be added after that ID in order to affect the div that has that ID (#wcfm-main-contentainer). Take a look once more at the nesting of the divs in the screenshot of the CSS you first shared here: https://snipboard.io/dobj9s.jpg.

Also on a multisite, how do I get custom templates pushed to all sites?

For this question, if when you say ‘custom templates’ you’re referring to a Block theme template, you can approach this by first exporting the customised theme.

That would be the first step. This exported theme would contain the custom template that you created via the Editor (or added manually to the theme folder).

Then, for this case of Multisite, you can manage the themes for the Network, by uploading that theme there, and enabling it for the entire network of sites. In doing so, it will be available for activation on each site, making the custom template available on every site in the network that the theme is active on.

These articles should help with those steps:

https://www.ads-software.com/documentation/article/site-editor/#how-to-export-templates-and-styles

https://developer.www.ads-software.com/advanced-administration/multisite/administration/#themes

Hi @janmtm

I really appreciate your assistance…. Ok so:

1. It appears the new wide template lost it’s width at save and jumped back to narrow. I tried to save again and it appears fixed now…
2. It turns out that plugin has a shortcode to output the frontend manager. So a SC block is added to my new manager page. The frontend manager displays beautiful in the new template…. so sorted and thx….
3. My theme header and footer are added to this page and it looks the part.
4. Also plugin has a setting to tell the site what page is the manager page: Plugin default or this other full site editor page that I can actually alter. That means all and any links to the manager now reverts to this correct wide view manager and not the narrow freaky manager…

A bit nitty to get the head around, but I really appreciate your time and thx again man. I am aware this is a bit custom and off topic, but what a weight off my chest…. THX!!!! Marked as solved

@hebhansen Oh this is great, mate! You’re most welcome. ??

Thank you for updating.