Home>Support>Column layout control on a tablet (3 columns)

Column layout control on a tablet (3 columns)

I have a three column layout in a row set to 50%, 25% 25%. On a desktop this is fine. On a mobile this goes to a single column per row.

~~~~~~~~~~~~
| 50 |25|25|
~~~~~~~~~~~~

Looking at a Tablet in PORTRAIT layout (example ipad 768px wide).

On a tablet (without tablet Layout enabled) it tries to keep the 50/25/25 ratio – but this becomes unreadable for the text within and the layout is destroyed / messy unreadable. you can only reduce text size so much to keep it readable and if there is too much text it just pushes down.

~~~~~~~~
|50|2|2|
5 5
~~~~~~~~

On a tablet (WITH Tablet layout enabled) the columns all seem to be give 50% width so you get two on the first row and the final taking up the last row -but only 50% of it .. and a gap of space remaining for the last half of the ‘row’ (I’m quoting the word row here because I know a new row is not formed its just a wrap/float of the cells into the available space – but visually you see them as a new row).

~~~~~~~
|50|50|
|50|
~~~~~~~

What do I want to see? Well Ideally the column ratio should be kept as it is re-scaled at this size into ‘rows’ (or cell sized increased) so my 50/25/25 instead of becoming 50/50/50 should become 100/50/50 this would mean I would see two ‘rows’ form still but the entire usable width is still used as well as the initial ratios kept.

~~~~~~~~~~~
| 100 |
| 50 | 50 |
~~~~~~~~~~~

I have tried to achieve this layout fold using Site Origin.

For example I had hoped that if instead of three columns I used two columns of 50/50 widths and in the second column I used an embedded layout editor to make two other columns inside of it of 50/50 (meaning 25% of the parent row)
~~~~~~~~~~~~~~~~~~
| |~~~~~~~~~~~|
| 50 || 50 | 50 ||
| |~~~~~~~~~~~|
~~~~~~~~~~~~~~~~~~~

Hoping that it would then upon entering a tablet size become two ‘rows’ of 100% each of the main cells and the second then having child cells of 50/50 still- but instead the 50% sizing is kept. and it basically looks the same as the original layout with everything crushed.

~~~~~~~~~~~~~
| |~~~~~|
| 50 ||5|5||
| ||0|0||
| |~~~~~|
~~~~~~~~~~~~~

I have also tried adding custom classes and using CSS to override the widths at ‘tablet’ screen sizes using a media query (680 > x x < 768 ) but I haven't had a great success.

It seems that tablet just isn't well supported for layout adjustments / control which is a shame as phone get bigger there is more need for this middle ground as just dropping everything to a single column can inefficiently use the space, look out of place and overblown.

Does anyone have any suggestions here?

Hopefully my ASCII art makes sense in the post formatting.

(PS WTF.. if you try and post without a Topic selected it dumps your content and you have to write it all again. how about disabling the dam Post button if the necessary fields are not completed rather then infuriating users)

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 2 months, 5 days ago Alex S Hi, I Work Here

    Hi Jamie,

    Unfortunately, finer control over how columns collapse and/or resize on mobile isn’t currently possible. I’ve marked this thread as a feature request. This is something we’re looking into and so this should hopefully be possible in a future update.

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More