Clone Project

Testing Landscape Viewports (Without Leaving the Designer)

Created by
Francesco Castronuovo
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
AI Description

This component provides a method to test layouts against landscape viewports directly within the Webflow Designer, eliminating the need for publishing and using browser DevTools. It utilizes a wrapper element and Webflow variables to scale properties defined with vh units, allowing for quick previews of layout behavior at various viewport heights.

Key Features:

  • Simulates custom landscape viewports directly in the Webflow Designer.
  • Utilizes a lightweight wrapper element for viewport scaling.
  • Allows for quick adjustments and easy removal after testing.
  • Enables testing of common landscape aspect ratios like 16:9.

Design Elements:

  • Incorporates a clean layout with a hero section featuring a background image.
  • Uses a structured content section with rich text for descriptive content.
  • Includes a YouTube embed for instructional video integration.

Potential Use Cases:

  • Web designers needing to test responsive layouts without publishing.
  • Developers looking to debug layout issues in landscape viewports.
  • Agencies creating websites that require extensive responsive testing.

Conclusion: This component offers a practical solution for testing landscape viewports in Webflow, enhancing the efficiency of responsive design workflows.

Description from Webflow:  
Testing layouts against landscape viewports in Webflow can be surprisingly inconvenient. The usual workflow involves publishing the project, opening Chrome DevTools, enabling responsive mode, and manually resizing the viewport to simulate different aspect ratios. This cloneable shows a simple system that allows you to simulate a custom viewport directly inside the Webflow Designer. By combining a wrapper element with a Webflow variable that scales all properties defined using vh units, it becomes possible to quickly preview how a layout behaves at different viewport heights — including common landscape scenarios like 16:9. The setup is lightweight, easy to adjust, and just as easy to remove once responsive testing is complete. A small but practical technique that can make debugging responsive layouts inside Webflow much faster. 👉 Watch on YouTube: https://youtu.be/4hHJPUMvUDA
Tags from Webflow: 
cloneable,  madeinwebflow,  responsiveness,  webflowhacks,  landscape,  breakpoints,  variables,  interactions with gsap
.