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.

Before

css_page_width_before.png

After

css_page_width_after.png

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;
	position:relative;
	right: 2px;
	/* These two settings remove the white border next to the header. */
	padding-left:0px;
	padding-right:0px;
}
 
/* 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 {
	padding-left:10px;
	padding-right:10px;
}
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

Comments

  • Avatar
    Marilenis Olivera Lee

    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!

    Mari

  • Avatar
    Jim Hershkowitz

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

  • Avatar
    Anton de Young

    Marilenis and Jim, 

    This CSS will take care of it: 

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

    body {padding: 0;}

  • Avatar
    Support

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

  • Avatar
    Anton de Young

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

Please sign in to leave a comment.