Details
Mobile Columns Per Row
By Paul
Dec 14, 2018 pm31 2:12 PM
Due mainly to 16 years of legacy, WSN uses tables as the default way to arrange your category and listings layouts. This has the advantage of making it easy to control the number of columns per row (via the settings at Admin -> Settings -> General), but the disadvantages of being considered poor practice and not reflowing easily on mobile devices.
To address the mobile problem, a year or two ago I added mobile override options on the mobile settings page. This allowed you to have for example 3 columns of categories on desktops/laptops but 1 column on mobile devices to fit into small screens without horizontal scrolling. Until now, only WSN Links had this set up by default on new installs -- today I've set all scripts to have 1 column per row on mobile by default, and have applied it to upgraders too (unless another value has been manually set or there are 0 columns per row) since there's really only one reason for another value.
That one reason was the big issue I had to deal with today: tableless layouts. For many years, WSN has allowed you to set the columns per row to 0 in order to stop WSN from auto-inserting any table cell code, so that you can remove the tables from your templates and use a div layout (autowrapping div floats or whatever you like). This created a sort of hidden conflict with the mobile override, because you might set the category columns per row to 0 at Admin -> Settings -> General -- but if there were a mobile override value of 1, you wouldn't realize you had to change that to 0 too. What I've done is I've made WSN automatically change the mobile override column values to 0 when you change the non-mobile values to 0, and change the mobile override column values to 1 when you change the non-mobile values from 0 to another number (reinstating tables).
This should allow a seemless experience where sites will fit mobile screens by default without your having to fiddle, and you'll still be able to change to a tableless layout without having to alter a second non-obvious spot.
By Paul
Dec 14, 2018 pm31 2:12 PM
To address the mobile problem, a year or two ago I added mobile override options on the mobile settings page. This allowed you to have for example 3 columns of categories on desktops/laptops but 1 column on mobile devices to fit into small screens without horizontal scrolling. Until now, only WSN Links had this set up by default on new installs -- today I've set all scripts to have 1 column per row on mobile by default, and have applied it to upgraders too (unless another value has been manually set or there are 0 columns per row) since there's really only one reason for another value.
That one reason was the big issue I had to deal with today: tableless layouts. For many years, WSN has allowed you to set the columns per row to 0 in order to stop WSN from auto-inserting any table cell code, so that you can remove the tables from your templates and use a div layout (autowrapping div floats or whatever you like). This created a sort of hidden conflict with the mobile override, because you might set the category columns per row to 0 at Admin -> Settings -> General -- but if there were a mobile override value of 1, you wouldn't realize you had to change that to 0 too. What I've done is I've made WSN automatically change the mobile override column values to 0 when you change the non-mobile values to 0, and change the mobile override column values to 1 when you change the non-mobile values from 0 to another number (reinstating tables).
This should allow a seemless experience where sites will fit mobile screens by default without your having to fiddle, and you'll still be able to change to a tableless layout without having to alter a second non-obvious spot.
Views | 83 views. Averaging 83 views per day. | ||||
Similar Listings |
|
Sorry, you don't have permission to post. Log in, or register if you haven't yet.
Please login or register.