You could also add more breakpoints at other screen sizes using CSS queries. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. So it will start to wrap at smaller sizes but only when the module it is in gets smaller than that size.īut if you want to replicate the site you linked to, then you need to set the width at the minimum of each of the breakpoints. Supporting the reflow of content is also known as Responsive Web Design. Following our Responsive images and preventing page reflow article, we’ll now work on implementing this responsive images fix in WordPress. Do the same at 768px for tablet and then at the smallest size you want to cater for for mobile (I usually design down to 320px but up to you).Īnother thing I use a lot is to set a max-width. In Divi desktop goes down to I think 981px so figure out the width of the element that fits into your design at that size and then set the width of the text module on desktop to that size. Ref: em based media queries (Future technique) Using CSS grids to reflow content (CSS). ![]() Sorry I can't think of the right way to say that. ![]() If you make the site mobile friendly (responsive design) using media queries at 320px wide minimums you pass the criteria. The way to get this to work as close to this as possible on Divi would be to set the width of the text module at the smallest size it can work at the smallest resolution on that breakpoint. To comply with WCAG 'Success Criterion 1.4.10: Reflow' your site should work at 400 zoom on a 1280px wide browser - which is equivalent to 320px wide.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |