Responsive Columns - ipad portrait vs iphone landscape

Support
#1

Hi,
Using X theme (not pro)
I am a bit confused about the responsive function and wonder if there is a solution.

On 1 page of my site, I am using Blank Template, Full Width and settings as wide as possible - no custom CSS.
I created 1 row with a 5 column layout. Each column contains a Feature Box.

Using an iPhone 5 in landscape mode, the row breaks down into a single column. However, using an iPad Mini 2 in Portrait mode, the row does not break down at all. I get 5 columns across the row, and things are very tight. If you insert a fair sized URL, it will overlap into the next column.

My point is, an iPhone 5 in Landscape vs. an iPad Mini 2 in Portrait has roughly the same screen width. Let’s say both are around 1024 pixels wide just to be arbitrary.

So why doesn’t the iPad Mini break down into say 2 - 3 columns with 2-3 rows? And why does the iPhone break down into 1 column when it could easily handle 2-3 columns broken into 2-3 rows.

Sure I know that a 5 column row broken down into anything other than a single column will end up without any symmetry for the content, but at least things would fit better.

So I’m just wondering, is there a way to make the iphone (in landscape) retain an extra column (2 instead of 1), and is there a way to force the ipad to break those 5 columns into 2 or 3 so the content has enough space to exist, and not ‘co-exist’ with other columns content?

Thanks in advance for any understanding and direction your throw out.

Cheers!

#2

Hey there,

Though mobile devices might be physically close in size, their resolution might be different. iPad is a tablet and inside Cornerstone, you can design for tablet by using the Responsive Viewer.

In your case, since 5 columns is way too narrow on a tablet, you should hide your Section in tablet views using the Hide Based on Screen Width option available when you inspect a Section. This feature is also available for Row and the Gap element.

Once it’s hidden in tablet views, you can create a new section that is hidden in desktop and phone views and recreate your design using 2 or 3 column setup.

Thanks.

#3

Hi, I just realized that iphone browser resolution is actually much smaller than ipad. my apologies for that. However, it’s the iphone I am most concerned with, again sorry for the confusion.

I’ve tried using the responsive breakdowns and was already familiar with their use. Unfortunately, while your responsive breakdowns have ipad landscape and ipad portrait layouts, there is no iphone landscape layout, only the iphone portrait layout is provided. Thus in this case, the iphone 5 is 1 column in both landscape and portrait, even though the landscape can support 2 columns easily. And I also found that the iphone 7, with 736x414 in landscape also is 1 column only.

I can’t begin to tell you how bad this looks… I have a column of tiny Feature Box icons with a small title under it dead in the middle of all that territory. This surely should be at least 2 columns wide. here’s a screenshot from iphone 7+

Further update, I just created a test page with 1 row and 4 columns. Each column again has a Feature Box. Using my browser, wide to narrow, I realized that X has either a 4 column layout or 1, there is no middle ground for a 2 column layout in it’s responsive design.

… So, if I have a resolution of less than say 768 pixels and greater than 480, can I get a row with 2 or more columns to be 2 columns?

#4

Hi There,

Although it is quite uncommon for people to check websites on phone landscape, please provide your URL and point the specific section so we can provide you the media queries for the required widths.

Thank you