WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.6 is now available!


Will it continue with WB? It goes on! | Geht es mit WB weiter? Es geht weiter!
https://forum.websitebaker.org/index.php/topic,32340.msg226702.html#msg226702


The forum email address board@websitebaker.org is working again
https://forum.websitebaker.org/index.php/topic,32358.0.html


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Bakery Shop »
  • How To: From 3 columns to 1 when on mobile?
  • Print
Pages: [1]   Go Down

Author Topic: How To: From 3 columns to 1 when on mobile?  (Read 35028 times)

Offline seanie_morris

  • Posts: 301
  • Gender: Male
How To: From 3 columns to 1 when on mobile?
« 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.
Logged

Offline jacobi22

  • Betatester
  • **
  • Posts: 5920
Re: How To: From 3 columns to 1 when on mobile?
« Reply #1 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,
Logged

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Bakery Shop »
  • How To: From 3 columns to 1 when on mobile?
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2