Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • How They Work Together
  • Recommended Approach
  • Best Practices
  • Recommended Maximum Widths
  • Common Issues
  1. Fundamentals
  2. Section Settings

Understanding Layout Settings: Size & Maximum Width

Learn how to effectively use Size and Maximum width settings together to create responsive layouts that look great on all devices.

How They Work Together

Size Setting

  • Expressed as a percentage (e.g., 95%)

  • Controls how much of the screen width the section uses

  • Particularly important for mobile views

  • Applies to all screen sizes until Maximum width is reached

Maximum Width Setting

  • Expressed in pixels (e.g., 1200px)

  • Sets an absolute limit on how wide the section can get

  • Prevents sections from becoming too wide on large screens

  • Only takes effect when the Size percentage would exceed this width

Recommended Approach

Step 1: Set a Large Size

Set Size to 90-95%
Why:
- Ensures content is wide and readable on mobile
- Maintains consistent margins on smaller screens
- Prevents content from feeling cramped

Step 2: Control Desktop Width

Set Maximum width to 1200-1400px
Why:
- Prevents content from stretching too wide
- Maintains readability on large screens
- Creates a professional, contained layout

Best Practices

  1. Start with a large Size (90-95%)

  2. Set Maximum width based on content type

  3. Test on multiple screen sizes

  4. Consider content readability

  5. Maintain consistent spacing

Recommended Maximum Widths

By Content Type

  • Text-heavy content: 1000-1200px

  • Product displays: 1200-1400px

  • Images with text: 1200-1400px

  • Full-width imagery: 1400-1600px

  • Banners and heroes: 1400-1600px

Common Issues

Content Too Narrow on Mobile?

Solution: Increase Size percentage
Example: 80% → 95%

Too Wide on Desktop?

Solution: Decrease Maximum width
Example: 1600px → 1200px

Pro Tip: Always start with a large Size percentage (95%) and then use Maximum width to control the desktop experience. This ensures your content looks great across all devices.

PreviousSetting Solid Background Colors instead of GradientsNextUnderstanding Inner Padding & Outer Margin Settings

Last updated 2 months ago

Need help? Contact our support team at for assistance.

support@design-packs.com