Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Brine troubleshooting

The Brine family has multiple templates, which share the same underlying structure and functionality. This guide applies to all these templates.


This guide explains some of the most common issues that may come up when using these templates.

Tip: For general information see our other Brine guides.

Why aren’t drop-down menus appearing in the footer navigation?

Folders don't display as drop-down menus in the Footer Navigation. Instead, you can display them as separate columns with the folder title as a header.

To add drop-down menus to your navigation, add the folder to the Primary Navigation or Secondary Navigation.

Why is my text narrow and centered?

When certain blocks are in a single column, they automatically inset to the middle of the page with white space on either side. 

To remove the content inset, set the Content Inset tweak to 0 in the Main section of Site Styles.

To learn more, visit Structure and style.

My site title looks different on mobile devices

Your template's customizable mobile styles allows you to set a different font style for your site title in desktop than in mobile.

To keep your branding consistent across devices, select the same font style in the Mobile Branding and Header Branding sections of Site Styles. 

My columns are displaying in the wrong place

Single columns with a content inset wrap around floated blocks.

If the floated block is taller than the single-column content, it can interfere with the layout of multi-column content below. To adjust this, add a Spacer Block above the multi-column content.

My header elements aren’t displaying properly

If too many elements are set to display in the same area of the header, they may overlap. You may see this behavior on tablets or smaller browser windows.

For best results, place each element in a different part of the header. Choose where each element displays in the Header: Layout section of Site Styles.

My images aren’t displaying at site width

Image Blocks don't follow the content inset. Instead, they display at the width of the site. Adjust the site width with the Width tweak in the Site section of Site Styles.

You can also check Stretch in the Image Block Editor to ensure the image displays at the full width of the block. To learn more, visit Using the Image Block.

Tip: You can create full-bleed images on Index Pages by adding either a Regular Page section with a thumbnail, or a slideshow Gallery Page section. Learn more about the Index Page.

Why don't my blog posts have comments sections?

Blog comments are disabled by default in these templates, even if you enable comments on an individual blog post.

To enable comments for your site:

  1. In the Home Menu, click Settings.
  2. Click Blogging.
  3. Click Comments Settings.
  4. Check Enable Comments Globally. More comment settings will appear.

To learn more, visit Managing comments.

Why aren't my Index sections displaying at the height of my browser?

To set some or all content (Regular Page) sections to display at the height of the browser:

  1. In Site Styles, scroll down to the Index: Page section.
  2. Use the Apply Minimum Height tweak to set which section are affected.
  3. Set the Minimum Height tweak to 100vh. 

If your section isn't filling the height of the browser:

  • Experiment with the Padding (Overlay Pages) and Padding tweaks until you achieve the look you like. 
  • If your section content (including padding) is larger than the height of the browser, it will remain its original height.
  • The Mirror Border tweak may also affect the display of first sections.

For gallery sections:

  • Layout: Slideshow - Check Use Fixed Height to manually set the height.
  • The height is set automatically by the number and size of the gallery's images.

My mobile styles aren't appearing on mobile

If your mobile style settings aren't appearing on mobile devices and Device View, it could be that your site is set to switch to mobile view only on very narrow browsers. To reset the width at which it switches:

  1. From the Home Menu, click Design, then Site Styles.
  2. Scroll down to the Mobile section.
  3. Ensure your Mobile Breakpoint is set to 640 pixels or higher. 
  4. Click Save.

My Index Page mirrored border isn't the right color

The mirrored border takes its color from the main content area. To set this, use the Color tweak in the Main section. For more information and detailed steps, see the Index Page guide.

My parallax images are too cropped

In the Main: Overlay section, check Parallax Smart Crop. When this tweak is checked, the images crop the minimal amount required for parallax display.

My footer's middle blocks area disappeared

Sometimes when you delete all content from the middle blocks area, its annotation disappears in Columns view. To fix this, temporarily switch to the stacked layout:

  1. From the Home Menu, click Design, then Site Styles.
  2. Scroll to the Footer section.
  3. Choose Layout: Stacked.
  4. Exit Site Styles.
  5. Add content to Footer Middle Blocks Area.
  6. Re-open Site Styles, and choose Layout: Columns.
  7. Click Save.

My footer has different background colors on different pages

This happens if your footer background color is partially or completely transparent. On pages without thumbnails, the footer color displays over a white background. On pages with thumbnails, the footer background color displays over the color of your main content area.

To fix this: 

  1. From the Home Menu, click Design, then Site Styles.
  2. Scroll to the Footer section.
  3. Ensure the Background Color tweak is completely opaque.

My banners aren't full-bleed

Banners typically display full-bleed, meaning they extend to the edges of the browser. If your banners aren't doing this, adjust your site layout: 

  1. From the Home Menu, click Design, then Site Styles
  2. In the Site section, choose Design: Full Width or Design: Full Background.
  3. In the Site: Border section, ensure Show Border is unchecked.
  4. Click Save and refresh the page.

Can I disable the parallax scrolling effect?

Yes. To do this:

  1. Go to a page with a banner image.
  2. From the Home Menu, click Design, then Site Styles
  3. Scroll down to the Main: Overlay section.
  4. Uncheck the Enable Parallax tweak.
  5. Click Save and refresh the page.

This affects your whole site.

My banner image or video isn't displaying

In the Brine family, banners display on most page types, but they aren't supported for:

  • Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
  • Individual blog post, product, and event detail pages.
  • Cover Pages
  • Thumbnails added to the main Index Page. Instead, add thumbnails to content sections within the Index.

If your page supports a banner but isn't displaying one, here are some troubleshooting steps:

  1. From the Home Menu, click Pages.
  2. Hover over the page and click the gear-icon
  3. Click the Media tab.
  4. For banner images, click Image. For video banners, click Video.
  5. Ensure the image or video is there.
  6. Click Save and refresh the page.

If the banner still doesn't appear:

  1. From the Home Menu, click Design, then Site Styles.
  2. In the Main section, increase the Intro Padding (With Background Image) tweak.
  3. In the Main: Overlay section, ensure the Overlay Color isn't completely opaque.
  4. Click Save and refresh the page.

Header options aren't showing in Site Styles

Some elements' tweaks only display in Site Styles if those elements exist on your site. 

  • Navigation - These tweaks appear once you've added pages or links to your Primary Navigation or Secondary Navigation.
  • Shopping cart and customer account - These tweaks appear once you've created a Products Page. Express Checkout must be disabled.
  • Tag line - These tweaks appear once you've added a tag line.
  • Header: Bottom - This section appears once you've added one or more elements to the bottom half of the header in the Header: Layout section.
  • Header: Top - This section appears once you've added one or more elements to the top half of the header in the Header: Layout section.
  • Intro area and banner - These tweaks appear when you're on a page that supports them.

My mobile site scrolls horizontally

You may see horizontal scrolling if you've zoomed in on the page. Try refreshing your mobile browser to reset the zoom.

If this doesn't fix the issue, your site may have side padding that's less than 17 pixels, which can cause your mobile site to display wider than the browser window. To fix this:

  1. From the Home Menu, click Design, then click Site Styles.
  2. In the Site section, ensure the Side Padding is 17 pixels or higher. 

My headings break to two lines at certain widths

In the Brine family, some headings will break to two lines when the browser is around 1400 pixels wide, and then will go back to one line at around 1120 pixels. This is part of the template’s design.

My icons and site title overlap on mobile

If the elements in your mobile navigation bar overlap, move one or more of them to the other navigation bar.

For example, to move the ☰ from the top to bottom navigation bar:

  1. In the Home Menu, click Design, then Site Styles.
  2. Scroll down to the Mobile: Menu Icon section.
  3. Change the Position to Bottom (left, right, or center).

Repeat these steps for any elements that are overlapping.


Was this article helpful?
10 out of 39 found this helpful