Setting the page width and removing the page border

By default, the Zendesk layout resizes with the browser window. You can set a specific page width if you'd like.

This example describes how to do the following CSS customizations:
  • Set the page to a specific width
  • Remove the white margin next to the header
  • Set the footer width to match the page width

While the CSS in this article can be used to modify the web portal of the new Zendesk, it has no effect on the new agent interface.

For more information about getting started with CSS customization in Zendesk, see How to brand your Web portal.





The background border has increased because the page size was reduced. The width of the background border varies depending on the size of the browser window.

CSS code

The following code sets the width of the page, removes the white border next to the header, and then adds a border to the content container.

/* Set the width of the page */
/* If you want to constrain it
 * to a specific size. */
#page {
	margin: 0 auto;
	width: 1000px;
	max-width: 1000px;
	min-width: 1000px;
	right: 2px;
	/* These two settings remove the white border next to the header. */
/* Set the minimum width of the frame */
.frame {
	min-width: 510px;
/* Add a border within the content container
 * to compensate for taking it away
 * in #page. */
div#container {
Note: You should be careful when setting the page width because if you make it too small elements of the page will overlap (sidebar over the content container, for example).
The page header is contained within the page element, but the footer is not. So, if you change the page width, you also need to change the width of the footer to match.
/* Set the footer width to match the page width */
#footer {
  margin: 0 auto;
  width: 1000px;
  max-width: 1000px;
  min-width: 1000px;

For more information about customizing the footer, see Customizing the page footer.


Have more questions? Submit a request

Sign in to leave a comment


  • 0

    Hi Anton,

    Thanks for putting together this cookbook, it's very helpful!

    I have a quick question and hope someone in your team can help.

    I am styling the top navigation bar for my client's zendesk account to look like the one on their main website. Their top navigation bar extends 100%, it takes up all the browser's width.

    Is there a way to change the code in zendesk so the top navigation bar extends 100%?

    I have attached two images: top-nav-bar-cp.jpg is the top navigation bar of my client's website and the other one is what I have customized so far on their zendesk account.

    Any help is greatly appreciated!


  • 0

    Hi Anton, I have the same question as Mari above, can you please help??? Thanks! Jim

  • 0

    Marilenis and Jim, 

    This CSS will take care of it: 

    #page {max-width: none; padding: 0;}

    body {padding: 0;}

  • 0

    This does NOT work in Firefox. No one has caught this?

  • 0

    This was tested and does work in Firefox. Let us know if we can help you troubleshoot the problem you're having. 

Powered by Zendesk