View mobile layout in website page / landing page layout editor
Our customer base skews heavy mobile, and so designing our pages to look great on mobile browsers is a top priority. While you can "preview" what your page will look like on mobile in the preview tab, it would be really helpful to be able to use a mobile view when *building* your pages in the editor.
I use the awesome CLEAN theme, which allows you to set modules to be viewable on Desktop, Tablet, or Mobile — which is great because I can make some modules only viewable on Mobile and design for that specific use case. The problem is, when I set it to "Mobile only," I can no longer see it in the page editor 😶
As mobile becomes a greater share of traffic, making it easier for your customers to build pages for mobile feels super important!
I came here to post this exact request. Since I use CLEAN as well, I'll just reply here. The more I've thought about (and been frustrated by mobile-only modules disappearing from the live editor preview) the more obvious it seems that a mobile editor should have been available ages ago. For most, designing mobile first is a best practice, so shouldn't it even be the default in the editor?
The responsive previews are cumbersome, so I usually open it in a new page and use the inspector tool to check responsiveness. It's more accurate for tablet anyway.
I've only recently started using HubSpot but also a little disappointed in ability to easily tailor landing pages for mobile. Using a two-column layout where I can position form at top of second column is great for desktop but not ideal on mobile. Would be great to adjust positioning of modules for mobile. As mentioned above in a mobile-first world seems crazy that we can't create separate layouts for mobile when there is ability to create A/B layouts.
If you want to view the mobile layout of your website page or landing page in a layout editor, there are a few different ways you can do it depending on the tool you're using. Here are a few options:
Use a responsive design tool: Many website builders like Empresas de Diseño Web Guatemala and landing page editors have built-in tools that allow you to preview your design in different screen sizes, including mobile. Look for a button or dropdown menu that lets you switch between different device sizes, or a responsive design mode that automatically adjusts the layout based on the screen size.
Use your browser's developer tools: Most modern browsers have a built-in set of developer tools that allow you to inspect the HTML and CSS of a webpage. You can use these tools to simulate different screen sizes and see how your design will look on mobile devices. To do this, open the developer tools (usually by right-clicking on the page and selecting "Inspect"), then click the "Toggle device toolbar" button (usually a small icon that looks like a phone or tablet) to switch to mobile view.
Use a third-party design tool: If your website or landing page editor doesn't have a built-in mobile preview mode, or if you want more advanced features like device emulation or pixel-perfect design control, you can use a third-party design tool like Figma or Adobe XD. These tools allow you to create responsive designs and preview them on different devices, and you can usually import your design files back into your website or landing page editor when you're done.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
