fbpx

CuTt5: WooCommerce Mobile Breakpoint

June 8, 2017

Copper’s Tips & Tricks #5: WooCommerce Mobile Breakpoint

At the office, we use this breakpoints for CSS layouts, basically bootstrap’s:

From To Description
Nothingness 767px Mobile
768px 991px Tablet
992px Infinity Desktop

That’s the standard anyway, and we usually merge tablet and desktop together, at least for the most important features. However, there’s one very annoying thing that WooCommerce does. Here’s their table:

From To Description
Nothingness 768px Mobile
769px Infinity Desktop

Yes, a single pixel off of what we want. A single pixel that will bother you so, so much during development if you try to overwrite all of WC’s styles.

Don’t panic, however, as there’s an easy fix:

// Change Woocommerce css breakpoint from max width: 768px to 767px  
add_filter( 'woocommerce_style_smallscreen_breakpoint', function( $px ) {
	$px = '767px';
	return $px;
});

Done! There goes that pesky pixel.

Happy WooCommerce stylesheeting!

avatar
Fabio Pampin

Ver entradas

Most Recent

June 9, 2022

¿Qué son las DAO y cuáles son sus beneficios?

Es común en la historia contemporánea que haya cambios a partir de los avances en el campo de la...

Read More

June 2, 2022

¿Qué son las DeFi y por qué son el futuro de las finanzas?

Es común en la historia contemporánea que haya cambios a partir de los avances en el campo de la...

Read More

May 27, 2022

How to start a successful product build from scratch?

Creating a product from scratch could be a huge challenge. To achieve your business goals it’s important to develop...

Read More