Skip Navigation

[Resolved] Columns Count grid break – Responsive

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)

This topic contains 2 replies, has 2 voices.

Last updated by LukaszM 4 months ago.

Assigned support staff: Waqar.

Author
Posts
#2430413

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.

#2430983

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#2431073

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