Columns Count grid break - Responsive

This support ticket is created 2 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Toolset Blocks, Views plugin, WordPress Archives

This topic contains 2 replies, has 2 voices.

Last updated by LukaszM 2 years, 5 months ago.

Assisted by: Waqar.

Author

Posts

August 3, 2022 at 1:45 pm #2430413

LukaszM

Hi,
I am using full width product archive.
For full hd res I have 5 product columns.
I can break it for tablet and mobile. (2cols and 1col)
I just wonder if can I break with res. ~1000-1500px to 4 columns?
Like add another breaking point.

Well I can do !important overwrite CSS I just wonder for improvement.

August 4, 2022 at 7:58 am #2430983

Waqar

Hi,

Thank you for contacting us and I'd be happy to assist.

Yes, to include additional screen size breakpoints, you can use custom CSS Media Queries:
hidden link

Note: If you could share the link to your website's product archive page, I'll be able to share more specific CSS code's example too.

regards,
Waqar

August 4, 2022 at 11:05 am #2431073

LukaszM

I added two extra sizes: (I have really long product names, anyway)

@media (min-width: 782px) and (max-width: 1300px) {
	.wp-block-toolset-views-wpa-editor .js-wpv-loop-wrapper > .tb-grid {
		grid-template-columns: minmax(0, 0.33fr) minmax(0, 0.33fr) minmax(0, 0.33fr);
	}
}
@media (min-width: 1201px) and (max-width: 1500px) {
	.wp-block-toolset-views-wpa-editor .js-wpv-loop-wrapper > .tb-grid {
		grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
	}
}

I was about to say about improvement to plugin to add extra breakpoints:
hidden link
Anyway thx