Home/ Questions/Q 8719263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T06:45:06+00:00

My website is designed in landscape mode – one large headline and a table

  • 0

My website is designed in landscape mode – one large headline and a table in the center of the layout with 2 columns that act as menu.

However, if the site is displayed in portrait mode on a mobile phone, there is by far not enough space available for this layout, so using the flexi-background.js routines, the layout is ‘compressed’ and becomes very, very small while the background is nicely stretched on the screen.

The ideal way would be to simply append the 2nd table column to the 1st column by some ‘technique’ if portrait mode is detected. I could do that with PHP, but feel there must be a smarter way with CSS or some other technique – does anyone have experiences with a requirement like this one and how to adjust the landscape layout to portrait mode?

meta code:

<table>
<tr>
<td>menu item 1</td> 
<td>menu item 2</td> 
</tr>
<tr>
<td>menu item 3</td> 
<td>menu item 4</td> 
</tr>
<tr>
<td>menu item 5</td> 
<td>menu item 6</td> 
</tr>
<tr>
<td>menu item 7</td> 
<td>menu item 8</td> 
</tr>
</table>

If after the change, the “list” of menu items would be 1,3,5,7, 2,4,6,8 it would be okay.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The first thing to do is throw away the idea of using a table for this.

    It’s considered bad practice to use tables for this kind of thing anyway these days, but in your case it’s also the direct cause of the problem.

    CSS provides several mechanisms for aligning boxes that would work for you.

    1. Use float:left.
      Make all the menu items into <div> elements, with a single container element. Set the menu items to float:left in the CSS, and give them a specific fixed width. They will line up beautifully into as many columns will fit into the space available. I’m not usually a fan of CSS floats, but in this case it’s a good option because this method was designed specifically for situations like yours.
      Reference: http://css.maxdesign.com.au/floatutorial/

    2. Use display:inline-block.
      This has a similar effect of allowing you to layout the elements as float:left. It has some aspects to it that are nicer than floats, but also some quirks that can make it hard to get pixel-perfect precision. But it’s also a good solution.
      Reference: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

    • 0