Title: Constrained layout – Max Width
Last modified: September 4, 2024

---

# Constrained layout – Max Width

 *  Resolved [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/)
 * Hey
 * What does this code do?
 *     ```wp-block-code
       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {	max-width: 1280px;}
       ```
   
 * I have a frontend management setup, that somehow is squeezed into 680px. Setting
   this to 1280px fixes it, but will that affect everything on my site. Is it a 
   theme thing, a wp thing or is it coming from the plugin?

Viewing 12 replies - 1 through 12 (of 12 total)

 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-17996376)
 * Here is the actual css that controls max-width. [Turning max width off in inspector](https://snipboard.io/dobj9s.jpg)
   and I see things correct. Settings it as above comment, forces 1280px to the 
   entire site.
 *     ```wp-block-code
       .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](https://snipboard.io/C7rVip.jpg)(
   Here max-width on and ugly). Below is a div inside the above and setting it to
   1280px does nothing
 *     ```wp-block-code
       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 1 year, 9 months ago by [hebhansen](https://wordpress.org/support/users/hebhansen/).
 *  Moderator [janmtm](https://wordpress.org/support/users/janmtm/)
 * (@janmtm)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18000065)
 * Hi [@hebhansen](https://wordpress.org/support/users/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](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!
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18000526)
 * Hi [@janmtm](https://wordpress.org/support/users/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](https://snipboard.io/C7rVip.jpg) in 620px
      where content overwrapping and a mess
    - It is designed for a cotainer of 1280px. I want to [see this](https://snipboard.io/dobj9s.jpg).
      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
 *     ```wp-block-code
       .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:
 *     ```wp-block-code
       div#wcfm-main-contentainer form {	max-width: 100% !important;}
       ```
   
 * I tried this in css and it does nothing:
 *     ```wp-block-code
       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
 *  Moderator [janmtm](https://wordpress.org/support/users/janmtm/)
 * (@janmtm)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18001206)
 * Hi [@hebhansen](https://wordpress.org/support/users/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://wordpress.org/documentation/article/template-editor/](https://wordpress.org/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.wordpress.org/themes/basics/template-files/](https://developer.wordpress.org/themes/basics/template-files/)
 * Hope this helps you get a little closer to where you’d like to be on things.
 *  Moderator [janmtm](https://wordpress.org/support/users/janmtm/)
 * (@janmtm)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18001220)
 * Aha, something else to consider [@hebhansen](https://wordpress.org/support/users/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](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.
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18001638)
 * Hi [@janmtm](https://wordpress.org/support/users/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?
 *     ```wp-block-code
       div#wcfm-main-contentainer form.is-layout-constrainedor.is-layout-constrained div#wcfm-main-contentainer formordiv#wcfm-main-contentainer form .is-layout-constrainedor ................?
       ```
   
 * Plugin creates a permalink:
 *     ```wp-block-code
       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?:
 *     ```wp-block-code
        > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       ```
   
 *  Moderator [janmtm](https://wordpress.org/support/users/janmtm/)
 * (@janmtm)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18001969)
 * Hi [@hebhansen](https://wordpress.org/support/users/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.
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18002637)
 * By adding this css I can overwrite WP/Theme/Plugin and get it to change to 1280px:
 *     ```wp-block-code
       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {	max-width: 1280px !important;}
       ```
   
 * By adding this it does not work:
 *     ```wp-block-code
       #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?
 *     ```wp-block-code
       .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       ```
   
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18002713)
 * 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/&#8221](https://mysite.com/store-manager/&#8221);
   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?
 *  Moderator [janmtm](https://wordpress.org/support/users/janmtm/)
 * (@janmtm)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18004632)
 * Hey [@hebhansen](https://wordpress.org/support/users/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](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://wordpress.org/documentation/article/site-editor/#how-to-export-templates-and-styles](https://wordpress.org/documentation/article/site-editor/#how-to-export-templates-and-styles)
 * [https://developer.wordpress.org/advanced-administration/multisite/administration/#themes](https://developer.wordpress.org/advanced-administration/multisite/administration/#themes)
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18005235)
 * Hi [@janmtm](https://wordpress.org/support/users/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
 *  Moderator [janmtm](https://wordpress.org/support/users/janmtm/)
 * (@janmtm)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18007099)
 * [@hebhansen](https://wordpress.org/support/users/hebhansen/) Oh this is great,
   mate! You’re most welcome. 🙂
 * Thank you for updating.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Constrained layout – Max Width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentyfour/1.5/screenshot.
   png)
 * Twenty Twenty-Four
 * [Support Threads](https://wordpress.org/support/theme/twentytwentyfour/)
 * [Active Topics](https://wordpress.org/support/theme/twentytwentyfour/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentyfour/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/twentytwentyfour/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [layout](https://wordpress.org/support/topic-tag/layout/)
 * [max-width](https://wordpress.org/support/topic-tag/max-width/)

 * 12 replies
 * 2 participants
 * Last reply from: [janmtm](https://wordpress.org/support/users/janmtm/)
 * Last activity: [1 year, 9 months ago](https://wordpress.org/support/topic/constrained-layout-max-width/#post-18007099)
 * Status: resolved