Category image size – How to have different size thumbnails etc on one page.

Some CSS added to the Additional CSS panel of the customizer should take care of it. You can either make use of the existing .first class of the first element in a row, or use the :first-child pseudo-selector to target only the first element of the full list.

@media (min-width: 768px) {
  ul.products li.product:first-child {
    width: 28% !important;
  }
  ul.products li.product {
    width: 19% !important;
  }
}

Replace :first-child with .first to target the first of each row. You can fiddle with percentages to get the desired proportions without causing the last element to line feed.

I needed to use the !important modifier to get this to work using the Chrome Elements Developer Tool. It may not be necessary when in Additional CSS. Try removing them once you have the desired look. It’s far better to not use them unless absolutely necessary.

• This reply was modified 5 years, 7 months ago by bcworkz. Reason: code typo