Skip to main content

Site Code & Responsiveness

While Bloxsnap provides a visual canvas for layout assembly, in the end, ultimately developers and designers create the website with custom code.

This guide covers how to safely utilize the native Site-wide code layer and manage custom responsiveness across your web assets.

💻 Working with Site Code​

The Site Code panel acts as a secure override track. It allows front-end developers to append raw HTML, custom CSS rules, or global JavaScript execution scripts without altering the platform's core visual architecture.

Enforcing Global Custom Styles & Scripts​

To inject global modifications across an entire website environment:

  1. Open your target Website in the Editor via your console.

  2. Locate the Site Code in the sidebar.

  3. The interface provides separate input zones depending on your execution target:

    Global HTML: A place for global HTML code, with three important variables:

    • %app.lang% will be replaced by the language of the page.

    • %app.head% contains global CSS and important boilerplate for your website such as the charset, title, meta descriptions, OpenGraph, twitter cards, microdata, favicons, theme color, alternates, and canonicals.

    • %app.body% is where all the blocks will be rendered.

    Global CSS Panel: A centralized stylesheet block where you can write standard CSS declarations to override block component class styles globally.

    Global JavaScript (Before </body>): For site-wide custom JavaScript code.

  4. Click Save. The changes will instantly compile into your local visual staging environment.

📱 Designing for Responsiveness​

Every block and custom component inside Bloxsnap is responsive out of the box. However, handling asymmetric layouts or modifying fluid spacing behaviors across diverse form factors requires intentional styling controls.

Using the Responsive Device Toggles​

At the top of the main Editor workspace toolbar, you can fluidly switch your active canvas preview mode across common viewport breakpoints:

  • 🖥️ Desktop View (Default style inheritance track)
  • 📐 Tablet View
  • 📱 Mobile View

Custom Breakpoint Styling via Site Code​

If you need to execute precise, hyper-specific responsive modifications that fall outside the standard device toggles, utilize raw CSS media queries inside your blueprint:

/* Custom Viewport Optimization Example */
@media (max-width: 768px) {
  .custom-agency-hero {
    padding-top: 2rem;
    text-align: center;
  }
}