Knowledge Base


  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

Block References and CSS Styles

Because XML page layout updates do not reference CSS styles, some of the block references—such as those at the top and bottom of the page— may extend to the full width of the screen beyond the active area of your store.

Store Demo Notice
Store Demo Notice in “Page Top” Block

You can bring them into alignment with the page layout by applying a CSS style to the content in the CSS block that you want to place.  On the other hand, you might find ways to use the space, such as with the “Store Demo Notice” that runs the full width of the screen.

If you enclose the CMS block content in matching <div> tags, and apply an existing style from your styles.css stylesheet, the content will fall into alignment with the rest of the store.  The results may vary by theme, so you will have to experiment with different styles to achieve the effect you want.

For example, the following code formats the content of a CMS block that is placed in the “Page Top” area to be the same width as the header, rather than extending to the full width of the screen.

Code to Wrap Block in CSS Style

<div class="header">
<!-- your content goes here -->