What are some suggestions for reducing content layout shift for responsive layouts?

From researching https://web.dev/cls: "Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes".

But with responsive layouts, the containers for images and other content change. So, do we need to reserve space for container divs, etc.?

How do you reserve space for these elements for responsive layouts?

  • I don't know if it's the perfect answer, but I used Google's Analytics to evaluate the top 5 browser sizes. Then using CSS and media queries, specified the div, image and video sizes for each of these browser sizes.
    – Trebor
    May 6, 2021 at 1:41


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.