How to make Full-Width Pages in EZ-NetTools

Generally, EZ-NetTool’s PageBuilder assigns a set width to your pages.  (which you can change in the global settings).  But what if you want your page to fill the entire width of the screen?

This can be done with some simple CSS code…

<style>
/*-- Fullscreen setup --*/
body {margin:0;}
*, *:before, *:after {box-sizing:border-box;}
.ezpagebuilder-page-wrapper, .ezpagebuilder-page-wrapper > table, .ezpagebuilder-page-main {width:100%; position:relative;}
.ezpagebuilder-page-offset {display:none;}
.maxwidth { max-width:54em; margin:auto; }
</style>


Copy the code above, and paste it into the head code of your webpage.

How to Use This Code

If you’re unfamiliar with EZ-PageBuilder (or need a refresher course) here’s how to put the code on your page…

1. In EZ-PageBuilder, Click File > Page Options

2. Scroll down and paste the code in the field labeled “Head Code”.

3. Hit Submit.

Best Practices

When you use this code, everything will fill the full width of the screen.  So it’s important to give certain elements a maximum width.

Text that fills the entire screen can be hard to read, especially on large monitors.

Having text run from edge to edge isn’t desirable (as it makes reading extremely difficult).  Recommended line length is between 50-60 characters.

So it’s important to add a class of maxwidth to anything you don’t want to span the full screen-width (like blocks of text).

How to add maxwidth sections

There are many ways you could add a class in HTML.  But the easiest way is to add a layout manager and put maxwidth in the class field at the bottom.

To do this, create a new Layout Manager.  Scroll to the bottom.  Type maxwidth in the CSS Class field shown above, and click submit.  Then simply put anything you want to be narrower inside that layout manager.

Bonus Tip

Want to adjust the width?  Look at the CSS you copied and find…

.maxwidth { max-width:54em; margin:auto; }

Change the number to change the width.  54em means it’s roughly 54 characters long.

You can change this to anything you like, but remember that very wide blocks may be not ideal for long blocks of text.