Common Mistakes When Hiding Odoo Website Blocks (and How to Fix Them)

Hiding an Odoo website block seems simple, but the common mistakes are easy to make. You might hide the block for every device when you only meant to hide it on desktop. You might use a CSS selector that hits the whole page. Or you might forget a media query and end up with a layout shift. The good news: Odoo gives you a built-in Visibility section, and the Seatext integration uses it to hide a block on desktop safely. If you use the wrong approach, you risk a broken page that repels visitors.

Why Hidden Odoo Blocks Break Your Layout

Before you fix a mistake, you need to recognize what it does. On the surface, "hide this block" sounds final. In practice, the method decides whether the block leaves a gap, overlaps other content, or still appears on one device.

The most common symptom is a blank area where the block used to be. Another symptom is text jumping when the page loads. Sometimes the block never hides at all, because a later CSS rule overrides yours.

The root cause is almost always a mismatch between your intent and the CSS or Odoo setting you used. Knowing that makes the next sections easier to follow.

Mistake 1: Hiding a Block That Odoo Can Hide for You

Odoo's Website Builder gives each block an Edit button. Inside that panel, you will find a Visibility section. The Seatext integration guide shows one option: "Hide on Desktop". That option does what it says and takes care of the responsive behavior for you.

If you ignore that and write custom CSS, you have to write the exact selector and the right media query. One typo and the block stays visible. So whenever the block has a visibility option, use it first.

Custom CSS still has a place, but only for cases Odoo does not cover. For example, if you need to hide a block for a specific page or after a certain scroll position, you need CSS.

Mistake 2: Using a Selector That Catches More Than the Block

Odoo blocks come with generated classes like .s_text_image or .o_footer. If you write "section { display: none; }", you hide every section on the page. That is the mistake.

Always use a specific class or ID for the block you want to hide. Right-click the block in your browser and choose Inspect. Look for a class that appears only on that block. Test the selector in the browser console before adding it to your theme.

Also avoid using inline styles in the block's HTML. They are hard to maintain and override the same element's responsive rules.

Mistake 3: Missing or Reversing Media Queries

Media queries let you apply CSS only at certain screen sizes. To hide a block on mobile, use "@media (max-width: 767px)". To hide on desktop, use "@media (min-width: 768px)". Mixing them up is the classic mistake.

People also forget the closing brace or write the media query inside the CSS rule. Put the media query outside your normal rule and keep the braces balanced.

Use the same breakpoints as your theme, usually 576, 768, 992, and 1200 pixels. Don't invent a breakpoint that lands in the middle of a common device width.

Mistake 4: Not Testing on Real Screens

The Odoo editor shows the page inside a preview area, but it doesn't always match every phone. You test on a desktop and the block disappears, but on a phone it stays visible because the media query didn't fire.

Use your browser's device toolbar to simulate a phone and tablet. Then send the test link to a real phone. Check both portrait and landscape. Also refresh the page after hiding the block to make sure no cache or optimizer brings it back.

Mistake 5: Editing Odoo's Core Files

Odoo stores its styles in SCSS files that get compiled on upgrade. If you edit those files directly, your changes will be overwritten and can break other parts of the site.

Instead, put your custom CSS in the theme's custom CSS field. In Odoo, go to Website > Configuration > Settings, or use the Theme editor's custom code area. That keeps your hiding rules separate and safe.

If you use a third-party module that embeds code, like the Seatext integration, follow its instructions and place the code in the provided block. Do not patch the module file.

How to Diagnose and Fix a Hiding Problem

Here is a quick order to follow when a block looks wrong after hiding.

1. Write down the exact symptom. Does the block show on all devices, or only on one? Is there a gap?
2. Open your browser's developer tools and select the block. Look for a rule that sets display:none or visibility:hidden. Note the selector and the media query.
3. Check the block's Visibility section in Odoo's editor. If it has a "Hide on Desktop" option and you meant to hide it on mobile, change the setting or write a mobile media query.
4. If you used a selector, make it more specific. Add a class to the block if needed.
5. Put your custom CSS in the theme's custom CSS field, not in the HTML.
6. Test on desktop, tablet, and mobile. Use your browser's device toolbar and a real device.

When Hiding a Block Is the Wrong Move

Hiding blocks is not always a good idea. If you hide a section that contains a key message or a call-to-action, desktop visitors may never see an important offer. If you hide a menu link for mobile, users lose a main way to navigate.

Also consider SEO. A block hidden with CSS is still in the page source. That is fine. But if you use Odoo's "Hide on Desktop" option, the text is still indexed. That is good. The risk is hiding content that search engines should weigh higher, like a unique FAQ or a product description.

If a block serves no purpose, delete it instead of hiding it. That reduces clutter and avoids confusion for future editors.

Key Facts: The Built-in Visibility Option

Hiding an Odoo website block means making it invisible on some or all devices while keeping it in the page structure. The safest way is to use Odoo's built-in visibility options; custom CSS is for cases where those options are not enough.

Frequently Asked Questions

Why does my hidden block still take up space?

Because you likely used visibility: hidden instead of display: none. The first keeps the space, the second removes it. If you used Odoo's "Hide on Desktop" option, it should remove the block from view properly.

How do I hide a block on mobile only in Odoo?

Use a media query with a max-width. For example, "@media (max-width: 767px) { .my-block { display: none; } }". Make sure the selector targets only that block.

Is there a difference between "Hide on Desktop" and custom CSS?

Yes. The built-in option is easier and less error-prone. It does not require you to know CSS or manage media queries. Custom CSS gives you more control when the built-in option doesn't cover your case.

Can hiding a block hurt my SEO?

Not by itself. Hidden content is still in the HTML and can be indexed. The risk is hiding important content that users and search engines should see. Use hiding for design clarity, not for hiding content you don't want indexed.

What if my CSS override still doesn't hide the block?

Check the order of your styles. A rule later in the file wins if it has the same specificity. You might need a more specific selector or add !important as a last resort. Also check that the media query is matching the width.