With GeoDirectory’s default Bootstrap design style, listing grids already change with the screen size. Phones show one listing per row, wider phones and small tablets show two, and the number of columns you chose applies from 768 pixels wide upwards.

Choose the number of columns

• Archive and search pages: set Layout in the GD > Loop block, from one to five columns or a list view.
• Other pages: the GD > Listings block has its own Layout setting.
• Visitors can switch the view themselves with the GD > Loop Actions block.

Rows with gaps or cards out of line

In the Bootstrap style, each card stretches to the height of the tallest card in its row, so rows stay level even when titles or descriptions differ in length. Adjust the space between cards with Card row gap and Card column gap in the GD > Loop block. If some cards are much taller than others, shorten the text in the archive item template; see how to change the length of the text shown.

Sites still using the legacy style

If GeoDirectory > Settings > General > Developer > Default Design Style is set to Legacy (non-bootstrap), the grid does not collapse in the same way. Switching to Bootstrap is the best fix. If you need to keep the legacy style for now, this CSS shows one listing per row on small screens:

@media (max-width: 600px) {
	.geodir-category-list-view > li {
		width: 100% !important;
	}
}