Multiple columns on Storefront mobile version

  • Resolved charonsbell96

    (@charonsbell96)


    4 years, 8 months ago

    I’m looking to get multiple columns on my shop section using the Storefront theme. I am currently using the code below for 2 columns, but i’d like to know how i could make it be 3 or 4 columns instead.

    }

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

    @media (min-width: 768px) {
    .site-main ul.products li.product:nth-of-type(2n) {
    margin-right: 5.8823529412%;
    }

    Thanks

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Two show the products in 2 columns on mobile, add this CSS code:

    @media screen and (max-width: 767px) {
	.home .site-main ul.products li.product {
	  width: 48%;
	  margin: 0 0 0 4%;
	  clear: none;
	}

	.home .site-main ul.products li.product:nth-of-type(2n+1) {
	  clear: both;
	  margin: 0;
	}
}

    For 3 columns:

    @media screen and (max-width: 767px) {
	.home .site-main ul.products li.product {
	  width: 32%;
	  margin: 0 0 0 2%;
	  clear: none;
	}

	.home .site-main ul.products li.product:nth-of-type(3n+1) {
	  clear: both;
	  margin: 0;
	}
}

    And 4 columns (not recommended, as it will not look great on smaller screens):

    @media screen and (max-width: 767px) {
	.home .site-main ul.products li.product {
	  width: 23%;
	  margin: 0 0 0 2%;
	  clear: none;
	}

	.home .site-main ul.products li.product:nth-of-type(4n+1) {
	  clear: both;
	  margin: 0;
	}
}
    Thread Starter charonsbell96

    (@charonsbell96)

    @senff worked perfectly thank you!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Multiple columns on Storefront mobile version’ is closed to new replies.