Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • Automatic constraints
  • Manual constraints
  • Use alignment tools

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements

Constraints

Apply constraints to design responsive and adapt across screen sizes

PreviousCells and gridsNextFrame Elements

Last updated 2 days ago

Was this helpful?

Constraints allow you to control how elements behave in relation to their parent container. When you set constraints for an element, it ensures the element maintains a consistent position relative to the container, even when the screen size changes.

Automatic constraints

When you add an element to a section, container, or grid cell, and drag it around, it is automatically docked:

  • To the top of the parent element (container, stack, etc.).

  • And to the left or right edge of the parent element - whichever is the closest.

In the example below, the text element is automatically docked to the top and right sides of the container.

You can observe this when dragging the element and via the Inspector panel. The Constraints are indicated by the dashed blue lines surrounding it.

Steps to enable automatic constraints:

  1. Click on the element you want to set the auto constraints to open its Inspector panel.

  2. Under the General tab, click Auto constraints elements.

Manual constraints

You can override the auto constraints elements feature, and set the position manually from the Inspector.

Steps:

  1. Select the relevant element.

  2. In the Inspector panel > General tab, locate the Constraints section.

  3. Select the 2 constraint points (top or bottom, left or right).

  1. Enter the value for constraints. This can be considered as the margin between the selected element and the edge of its parent.

Measurement units for constraints:

  • Horizontal constraints (left or right): Percentage (%).

  • Vertical constraints (top or bottom): Pixels (px).

For example, if a text element's constraints are set as 10% for the Left and 100px for the Top, the element will stay to the left-right even as the screen size changes:

  • On a container width of 1265px, the margin between the element and the container's left edge is 126.5px, and the margin-top of the element with the container is 100px.

  • On a container width is resized to 900px, the margin between the element and the container's left edge is 10% of 900 = 90px, and the margin-top of the element with the container is 100px.

You can apply constraints to any layer/element.

Use alignment tools

To quickly align elements, you can use the option for the section's position alignment. This will override the current constraints.

Click the Center if you want to make the element always in the center.

You can apply constraints to .

You can't apply constraints to with the stack border.

frames you have nested within other frames
elements included in a stack