Skip to content

Instantly share code, notes, and snippets.

@jessepearson

jessepearson/storefront-two-columns.css

Last active June 22, 2020 01:34
Show Gist options
  • Save jessepearson/1ac73fc46db398365e8f15acc8b1fbc1 to your computer and use it in GitHub Desktop.
Save jessepearson/1ac73fc46db398365e8f15acc8b1fbc1 to your computer and use it in GitHub Desktop.
Download ZIP
CSS to add to make Storefront display two columns in mobile views.
Raw
storefront-two-columns.css
ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}
ul.products li.product:nth-of-type( 2n ) {
margin-right: 0;
}
@media ( min-width: 768px ) {
ul.products li.product:nth-of-type( 2n ) {
margin-right: 5.8823529412%;
}
}
@Moayid
Copy link

Moayid commented May 9, 2020 •
edited
Loading

I think it should be like this:

@media ( min-width: 768px ) {
ul.products li.product {
	width: 46.411765%;
	float: left;
	margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}
ul.products li.product:nth-of-type( 2n ) {
	margin-right: 5.8823529412%;
}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment