Bakery: Reducing number of columns in Mobile

[fangda]

 

Hello, this has probably been already answered in the forums but I couldn't find an answer.

I would like to know how to tell bakery to show only 2 columns of products when the user accesses the site using a mobile, but still use 3 or 4 columns when visiting on the desktop.

Thank you.

[eduardo]

Thanks Ruud

[Ruud]

Sorry, the example website has gone offline

[eduardo]

Ruud, can you sent me a PM to, thanks

[chris]

Is it possible to PM me also Ruud?
Thanks in advance!

[seanie_morris]

Sent you a PM

Ah go on, share it with the rest of us!

(or send me the same PM?)

[Ruud]

Sent you a PM

[svsanchez]

Thanks a lot Ruud, do you know of any site having implemented this?

[Ruud]

Using a layout grid (Bootstrap/Zurb/etc..) in your website template will allow you to do this.
You just need to change the bakery product-loop to whatever your grid needs (and remove all table references)

One small problem is that Bakery hardcodes </tr><tr> on every "row" that is generated because it is expecting to be in a table.
If you change the output into grid <div></div> blocks, these </tr><tr> do not really hurt, but it is not valid html.

[svsanchez]

Hello again, I still haven't found a fix for this, could someone please tell me if it's possible?

Thank you!

[svsanchez]

Hello, this has probably been already answered in the forums but I couldn't find an answer.

I would like to know how to tell bakery to show only 2 columns of products when the user accesses the site using a mobile, but still use 3 or 4 columns when visiting on the desktop.

Thank you.