My Content is Being Cut off on Mobile Devices

While Experios is designed to display your content correctly regardless of screen-size, problems can arise if you set too many explicit widths and heights on elements. As the page responds, the content may need to grow more than the defined size.

Flexibility can be introduced by using minimum and maximum dimensions.

Specifying minimum or maximum sizes for an element allows you to take advantage of the fluid nature of elements in a digital design, by allowing elements to expand and contract within a limited set of dimensions instead of defining a constant and absolute size as with the height and width properties.

Minimum height (Min height) defines the smallest possible size that an element can have. An element can grow beyond the defined min-height if the content becomes larger than the min-height value.

Maximum height (Max height) allows you to restrain an element to a specific height. An element can grow to fill the available space, up until the max height given.

Setting an element’s height to auto will allow it to scale in a manner that will ensure that parts of it won’t be cut off.

Updated on June 24, 2022

Was this article helpful?

Related Articles