Back

Layout problems

Apart from problems that might be hard to identify, most problems happen because of not using best layout practices and testing the website on different breakpoints and devices.

Intentionally overflowing elements

When using elements that intentionally overflow, like design decoration elements, sliders and images, you will have to set overflow:hidden on the parent element or the section.
‍
Overflow property defines what happens when the content of an element is too big to fit inside, and is consequently overflowing it. By default, this property is set to visible and content can overflow, but when we set it to hidden, the content that’s overflowing that area gets cut off.

Specifically set width

When adding a specific width to an element on the desktop breakpoint, it will affect all breakpoints. Usually, you’ll want to either stay away from those to make the layout truly responsive or change specific width with width:auto for lower breakpoints only.

Problems from grid

Grid is a very useful layout option, but if not used correctly can cause issues with responsiveness. If you’re having a problem with a horizontal scroll on a grid element, there can be many reasons. First, check that you’re using the correct amount of columns and rows for a specific breakpoint and that you’re not using specific column/row sizing settings that can break the grid. If you’re using areas, double-check if you’re using them correctly on all breakpoints. Lastly, check the grid child elements if you’re using manual position or column/row spans and change them accordingly with your design.

Problems from flex

When using a grid, make sure to use the correct orientation. More often than not, you’ll also want to select the children elements to wrap.

Mobile specific problems

Problems that occur from not resizing headings on mobile breakpoints, wrapping not used on flex, and not removing grid columns on lower breakpoints to accommodate the elements.