The Problem
When working on UI layouts, for testing responsiveness - you may be used to either:
- DevTools with custom viewport sizes
- Or some extension e.g. Window Resizer
- Or resize the browser window itself
The problem with above approaches is you would be testing with fixed window sizes.
The solution
Enter css property resize
The property accepts 4 different values:
- both - resized both horizontally and vertically
- horizontal - resize it in the horizontal direction
- vertical - resize it in the *vertical direction
- none - no user-controllable method for resizing it.
The rules to use
resize
:
- NO inline elements
overflow
is NOTvisible
Say you have code that has items wrapped in a flex container:
<ul class="items">
<li> item </li>
<li> lorem ipsum dorem </li>
<li> Lorem ipsum dolor sit amet </li>
<li> consectetur adipiscing elit, sed do eiusmod tempor incididun </li>
</ul>
.items {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
li {
border: 1px solid;
padding: 10px;
}
To use resize
, you'll wrap the ul
with style as:
.container {
display: block;
overflow: auto;
resize: both;
}
<div class="container">
<li> item </li>
<li> lorem ipsum dorem </li>
<li> Lorem ipsum dolor sit amet </li>
<li> consectetur adipiscing elit, sed do eiusmod tempor incididun </li>
</ul>
With this, you can test the responsiveness easily:
Codepen for a demo is available here
...
Top comments (0)