Responsive layout cell widths

Add-ons UIs
,
1

Hi All,

I’m working on making my pages look nice and organised (makes the wife happy, so she will use it) on iPad and iPhone. I’m trying to avoid having different pages for different devices (a lot of extra work) - on my 9.6in iPad the Responsive layout only likes to put 3 cells across, and the iPhone is 2. This is a pain for design - Playing with the browser size on my computer has lead me to believe i’m not many pixels off it naturally going to 4 Cells a line.

Anyone know how to change the threshold to get 4 cells across on the iPad in landscape mode? the cell’s will still be bigger than on the iPhone.

Thanks in advance.

2

You can configure the column width, what will impact how many columns are visible in one row.

It’s also recommended to design the liquor for the narrow screens first.

3

Yeah seen that.

Unless I’m misunderstanding it, that is only for the masonry, or fixed layouts, not responsive ones?

4

you have to set the column options so that the yaml code looks like this:

blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-cell
5

No, that’s especially for responsive pages