Source: https://divicake.com/blog/a-look-at-the-new-divi-responsive-views/ [Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/) # Divi Responsive Views Explained By Divi Cake·27 October 2026·Updated 5 September 2026·7 min read Divi Responsive Views Explained We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [But wait, isn’t Divi already responsive?](https://divicake.com#but-wait-isnt-divi-already-responsive) - [Original Preview Features](https://divicake.com#original-preview-features) - [More Viewing Options with Google Chrome Tools](https://divicake.com#more-viewing-options-with-google-chrome-tools) - [Divi’s Responsive Views](https://divicake.com#divis-responsive-views) - [Height Indicator](https://divicake.com#height-indicator) - [Viewing Different Devices](https://divicake.com#viewing-different-devices) - [Viewing a Custom Size](https://divicake.com#viewing-a-custom-size) - [Viewing in Landscape Mode](https://divicake.com#viewing-in-landscape-mode) - [Making a Default View](https://divicake.com#making-a-default-view) - [Ending Thoughts](https://divicake.com#ending-thoughts) Viewing your website in different screen sizes and resolutions is crucial. Visitors use desktops, tablets, and smartphones to view the website, so it needs to look great on all devices. [Divi](https://divicake.com/go/divi/)has a preview feature built into the builder, called Divi Responsive Views, that makes that task much easier. In this article, we’ll take a look at Divi Responsive Views, see what it can do, and see why you need it. Five controls in Divi’s responsive views at a glance Divi 5 note: The walkthrough below is the Divi 4 builder. Divi 5 widened the responsive system underneath it: the builder defines seven breakpoints — phone (up to 767px), phone wide (860px), tablet (980px), tablet wide (1024px), desktop, widescreen (from 1280px) and ultra wide (1440px) — with phone wide, tablet wide, widescreen and ultra wide switched off by default. You can enable, disable and resize each one from the builder, so the 320–980px range this article works in is now the phone-and-tablet slice of a wider set. ## But wait, isn’t Divi already responsive? Divi is responsive, meaning that it resizes and adjusts the content to fit different screen sizes, but it isn’t enough to automatically allow it to adjust the content to fit the screen. You want the content to adjust correctly, so words don’t wrap to the next line, photos don’t stack incorrectly, etc. This requires small adjustments to your designs, which is why it’s important to view your Divi website on different types of screens. Seeing your website in different screen sizes and shapes allows you to make adjustments so your website will always look great, no matter what screen your visitors are using. Divi has long had a simple preview feature to see the site in desktop, tablet, and phone modes. It was helpful, but it wasn’t ideal. Looking at that earlier preview shows why the responsive views matter. Let’s take a look. ## Original Preview Features Originally, the preview would display the website as a desktop, tablet, or mobile phone. The resolution isn’t specified on the screen. You could select between the three different screen options in the bottom left corner of the screen by clicking the icon of the device you want to see. Original Preview Features Here’s the Desktop View. This is the default view and the responsive views leave it alone, but it’s a good idea to see how it works so you’ll know what all of those buttons are. This view displays as your desktop, which might be a different size from your visitors. In my case, it’s a 15” screen with a resolution of 1920 x 1080. Original Preview Features The Zoom feature allows you to see more of the desktop view. It doesn’t provide any information about the screen size, the content that will show above the fold, etc. Original Preview Features This is the Tablet View. It’s the size of a common tablet in portrait mode, but it doesn’t show a specific tablet or screen size. It doesn’t show in landscape mode and you can’t change the size (at least without using code). Original Preview Features Here’s the Phone View. It shows how the website would look in portrait mode on a common smartphone. Like the tablet view, it doesn’t show the resolution, screen measurements, allow for a screen rotation, etc. ### More Viewing Options with Google Chrome Tools More Viewing Options with Google Chrome Tools Google Chrome Tools helps by providing even more viewing options. To view Chrome Tools, hold Ctrl-Shift-J (or hit the F12 button) in Windows, and Ctrl-Option-J on Mac. You can view the website as responsive, choose a specific device, edit devices, enter a custom screen size, drag the screen width and height, zoom to a specific level, and see the website in portrait and landscape mode. The example above shows my website in responsive mode at 760px wide. More Viewing Options with Google Chrome Tools This example shows an iPhone x in landscape mode. This is a lot more useful for seeing different screens, but it’s outside of Divi. By selecting Chrome Tools, your Divi editor now fits inside the smaller screen. This is helpful, but it’s still not ideal. Divi’s responsive views combine the Divi views and the views from Google Chrome Tools to create an even better viewing environment. ## Divi’s Responsive Views Divi’s Responsive Views The desktop view and its zoom feature stay the same, but the tablet and phone previews carry a lot more settings. You still get the standard Tablet and Phone views — they just have far more options. Above the preview window are settings to choose specific devices, see the size and enter a custom size in pixels, and make the current size the default view. On the sides are anchors that you can grab to resize the device by dragging. This example shows the standard Tablet View. ### Height Indicator Height Indicator The height indicator is a line that identifies where the height of the screen ends for each device. This is the “fold” in newspaper lingo. It refers to the area of the screen that displays before scrolling. This allows you to see what elements will appear above the fold on each of the devices you choose so you can plan your design. Hovering over the line shows the pixel height. ### Viewing Different Devices Viewing Different Devices Clicking the dropdown box for the views shows specific devices that you can choose. This makes the screen the size of that device and shows the size in the fields. By default, it shows the size as width x height in portrait mode. My example shows the website as it would look on a Galaxy Tab S in portrait mode. You can’t add new devices but you can create a custom view. Viewing Different Devices Selecting a different device automatically changes the icon in the lower-left corner to show if you’re viewing a tablet or a phone. This example shows the website as it would look on a GalaxyS10, S10+, A10, and A20 in portrait mode. ### Viewing a Custom Size Viewing a Custom Size To view the website in a custom size, simply grab the edge of the viewing area (the draggable anchors) and drag it to the size you want. It shows the number of pixels in the fields above the window and on the anchor when you hover over it. This example shows the pixel width as a small popup as I’m hovering over the left anchor. Viewing a Custom Size Alternatively, you can enter the number of pixels you want to see in the fields. You can also fine-tune the adjustments by clicking the arrows that appear in the fields when you hover over them. Viewing a Custom Size This is the smallest width. It’s 320px wide. Viewing a Custom Size This example is 980px wide. This is the responsive breakpoint when it changes to the desktop design. ### Viewing in Landscape Mode Viewing in Landscape Mode Click the icon to the right of the width and height fields to preview the website in portrait or landscape mode. The icon shows the device in both positions, but the mode that is currently viewed is darker. This example shows the icon and device in landscape mode. This example shows that the breakpoint for this device is 360px. ### Making a Default View Making a Default View You can make any size the default tablet or phone view. For a standard size, choose a device from the dropdown box to choose a default device. For a custom size, select the icon in the lower-left corner for the type of device you want to create a default view for. To create the custom size, drag the sides, or enter the numbers in the fields. Click the Make Default button in the upper right corner above the website preview. Now, when you select to see the tablet or phone view, your custom size will be the one that shows. You can select another size, create a custom size, and create a new default view at any time. ## Ending Thoughts This [Divi](https://divicake.com/go/divi/)feature is simple but important for designers to see their websites on various devices. You can see the website as responsive, with presets for specific devices, custom sizes, see the site above the fold, and see it in portrait and landscape modes. You can also drag to resize and create your own default sizes for both tablets and phones. Changing between the views is easy and fast. I always recommend testing the site on real devices before publishing, but the responsive views save a lot of design and troubleshooting time since we no longer have to use other devices to see how the website will look during the design process. For more on the Divi builder’s design tools, see these articles: - [A Look at the New Divi Sticky Options](https://divicake.com/blog/a-look-at-the-new-divi-sticky-options/) - [Divi Presets Overview](https://divicake.com/blog/divi-presets-overview/) - [A Look at the Divi Animation Builder](https://divicake.com/blog/a-look-at-the-divi-animation-builder/) - [A Look at the New Divi Layers View](https://divicake.com/blog/a-look-at-the-new-divi-layers-view/) We want to hear from you. What do you think about Divi responsive views? Let us know in the comments. ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tutorials [ Divi's Global Color System Explained Tutorials6 min read ### Divi's Global Color System Explained How Divi's global colors work: add or convert a color once, reuse it in every module, then edit it in one place to recolor the whole site. 25 October 2026](https://divicake.com/blog/a-look-at-divis-new-global-color-system/) [ Getting Started with Divi: Theme Options - SEO Tab Tutorials5 min read ### Getting Started with Divi: Theme Options - SEO Tab What every setting in Divi's Theme Options SEO tab does — homepage title, meta description and keywords, canonical URLs, title autogeneration, and the separate controls for single posts and the index page. 21 October 2026](https://divicake.com/blog/getting-started-with-divi-theme-options-seo-tab/) [ Getting Started with Divi: Design Settings Tutorials8 min read ### Getting Started with Divi: Design Settings What the Design tab does in Divi: dividers, sizing, spacing, borders, box shadows, filters, transform and animation on sections, rows and columns, plus the full design settings for the blog module. 19 October 2026](https://divicake.com/blog/getting-started-with-divi-design-settings/)