How to change region width

so far I have been editing the spirit theme and I am wondering how to edit the width of the regions from 1080pixels wide to 1440pixels wide?

  • Nithin
    • Support Wizard

    Hi Larsman,

    Hope you are doing good today. :slight_smile:

    I’m afraid there isn’t any out of the box settings available in Upfront to make these changes, the regions are fixed by default. What you could do is make use of Custom CSS to change the width, you can add the following code in your Global Theme CSS section:

    #upfront-region-container-REGIONID .upfront-grid-layout {
    width: 1440px;
    }

    Where REGIONID represents the name of your region. Please do note that it’s not how Upfront is designed for, and cannot guarantee that these changes will work out of the box with other Upfront settings.

    Kind Regards,

    Nithin

  • Larsman
    • Design Lord, Child of Thor

    Hi Nithin,

    Just to check my understanding. Are you saying: The region width in upfront is set to a maximum of 1080 pixels. or are you saying that the regions in the Spirit theme is set to 1080 and is now uneditable. So that I might infer that if I built my own theme from scratch I can set my underlying regions to 1440 pixels wide.

    Thanks for your support

  • Rupok
    • Support Ninja

    Hi Larsman,

    The region width in Upfront is set to a maximum of 1080 pixels. But you can easily override that to your own with the following custom CSS Code:

    .upfront-grid-layout {
    width: 1440px !important;
    }

    You can use your own value instead of 1440px. That will make the full Upfront grid using 1080p. As this will be applied to all elements and pages inside Upfront, you should add this in "Global Theme CSS" section in your Upfront Editor. Please check the attached screenshot for reference.

    Spirit theme is not set to 1080px with, it just honors Upfront grid size. So if you make Upfront grid size 1440px, Spirit will also be showing content in 1440 pixels width.

    So if you build your own theme from scratch with Upfront, you can set your full theme content width to 1440px if you want. Or you can edit any of our existing themes and change the content width with the custom CSS code I provided above.

    Please let us know if you still have any confusion. We will be glad to help.

    Have a nice day. Cheers!

    Rupok

  • Nithin
    • Support Wizard

    Hi diegpl,

    Hope you are doing good today. :slight_smile:

    I’m afraid, there isn’t any option implemented in the latest version of Upfront to edit the width for existing versions, you’ll have to make use of CSS as mentioned above. I’ll move this thread to Features & Feedback, so that the more users who supports this idea, the more it’ll be considered for development.

    Kind Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hey diegpl,

    WPMU Staffs doesn’t have much use of these points. You are giving away your points when you award your points to members. You can gift members Hero points to show appreciation if you find their comments helpful. You can check this link on more info:

    https://premium.wpmudev.org/earn-your-wpmudev-membership/

    However, we always love when we get some appreciation, and it keeps us motivated help members more. :slight_smile:

    Kind Regards,

    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.