WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Bakery Shop => Topic started by: seanie_morris on September 24, 2018, 01:50:34 PM

Title: How To: From 3 columns to 1 when on mobile?
Post by: seanie_morris on September 24, 2018, 01:50:34 PM

Hi folks,
I thought I had an answer to this but I can't get the right search words to find it.

Is there a way to go from a 3 column layout when on desktop view to a single column layout on mobile, when viewing products? I am trying the daflagga template with Bakery.

Seanie.

Title: Re: How To: From 3 columns to 1 when on mobile?
Post by: Gast on September 24, 2018, 02:56:07 PM

Bakery use float:left to build the row's on the page. it's a question of the width from the content around the bakery table. but take a look into the bakery page settings, so that you have no fixed table width there, use style="width:100%;" instead of a width="600px" (for example), important is here %
important for the width of a row inside of the bakery table is the width and the display mode of the thumbs and maybe the settings for that
P.S.: same procedure for all other subpages in bakery, item detail, basket, the forms etc

for the rest...
variant 1: use a grid system in you template to build the row's - needs a complete recoding or a new template
variant 2: use responsive width values (in %) and a special mobile.css, maybe in combination with media-query's. daflagga is preperad for mobiles and use some of this media-query's, but not for all elements.
be sure, that your main content go'es not out of the display, normale size is 90% of the display-width,