When you change the width of the Text Module to 80%, you’ll see the Text Module shrink in size. Then, insert a Text Module with some content, a background color and some custom padding. We’ll add a section with a one-column row. Once the max width value is reached, it won’t exceed it.īut how does that translate into responsive design? To help explain the difference, we’re going to create a visual comparison by enabling the Visual Builder on a brand new page. If the width of a module is set to 100%, it’ll adhere to that value as long as it stays below the max width value. Max Width – The max width has power over the width. The lower the percentage for the width, the narrower the design element will be. If this is 100%, it’s as wide as the container allows it to be. Width – The actual width of a design element. This is what the theoretical explanation is:

Subscribe To Our Youtube Channel Understanding the Difference Between Propertiesīefore using width and max width in our daily design processes, it’s important to understand what they do. We’ll begin by first explaining the difference between all the height and width properties available within the Divi settings and then use them in different scenarios to make our page designs behave exactly the way we want them to. Now, all of this sounds great, but how does this translate into a beautiful website, practically speaking? That’s exactly what we’re going to talk about in this post. This gives you the freedom to create websites that are highly responsive across different screen sizes. And now, with Divi’s new draggable sizing options, you can literally control every element’s width, max width, min height, height and max height inside the builder itself. Although they’re usually not the first thing visitors notice about your website, width and height CSS properties help keep your website together and looking awesome.

Css force responsive resize