products gap

Hey Mohammad,

I couldn’t open the image file. It says it’s been deleted. However, when it comes to troubleshooting CSS issues, a link to the page you’re working on is much more useful because it allows me to view the HTML and existing CSS rules, and then provide very specific advice on what you need to do.

You can send the link privately via my contact form if you prefer.

If the site isn’t online yet, I can try to guess at what’s going on from your description. It may be that the current layout is using float or flexbox with flex-wrap set to wrap. So instead, use Microthemer’s CSS grid options to set a 4 column grid on the element with the class “columns-4”. If you use the drag and drop grid controls, this should set “display: grid” and set the column widths to “1fr”. That way, the items should not wrap over multiple rows. Instead, they should shrink to fit the available space.

Without viewing the page, I can’t really say for sure what’s going on though.

Cheers,
Sebastian

Thanks for that. So if you like to work directly with code, I recommend removing the current code shown in your screenshot and replacing it with:

.columns-4 {
	display: grid;
	column-gap: 2px;
	row-gap: 2px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;
}

The following screenshot shows how this code should layout the items:

The following screenshot shows how to create this layout using the drag and drop CSS grid controls:

If this doesn’t work for some reason, you may need to make sure you are targeting the direct parent of the items you want in a grid (rather than a higher up parent). That’s because CSS grid alignment only applies to direct child elements.

Let me know if this helps!

Cheers,
Sebastian

Excellent, thanks for confirming.