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.8 is now available!


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 37278 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: 5921
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