Page tiny on phone

[DogBizPro]

Okay, we just undertook a HUGE project of using the PageLayout for our application to make things 'responsive'. After the first phase roll out, things do NOT look good on phones. They page elements are actually smaller than what they were in the older version? What the heck did we do wrong?

It is showing the small/medium version, but there is a TON of space to the right that I would expect to NOT be there. Any ideas?

[DogBizPro]

Okay I added the following meta tag and things look better...

 

<meta name="viewport" content="width=device-width, initial-scale=1" />

[DogBizPro]

Okay, in Google on the iPad it looks 'bad' still.....Showing the large/x-large version vs the medium....

[DogBizPro]

The portrait version looks even worse on the iPage. Things are right aligned. I thought this was cross browser/platform. I spent 100's of hours updating our pages to use this control....not to mention the $ to purchase/renew this. So there better be an easy! fix for this. Thanks!

[DogBizPro]

This is SO bizzare. Refreshed both Safari and Chrome on iPad and they book look GREAT in portrait now, but in landscape they are showing the lg/xl version of the pages really tiny in the upper left corner. Why are they not showing the medium version. It is an iPad mini.

Things look great both directions on my Samsung tablet. Although when I rotate it I have to refresh the page for it to resize correctly, no big deal. It the iPad mini still has issues in landscape. It is showing the medium looking screen, but small. I can pinch and get it larger, but why does it not show automatically like on the Samsung?

[Magdalena]

Hello Stephanie,

We have created a sample project to test the described scenario and we have added there the viewport meta tag as well. We have tested the page on iPad mini and the RadPagelayout worked properly on our side. We have tested the following code:

<telerik:RadPageLayout ID="Radpagelayout1" runat="server" GridType="Fluid">
    <Rows>
        <telerik:LayoutRow>
            <Columns>
                <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                    <center>
                        Column 1
                    </center>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                    <center>
                        Column 2
                    </center>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                    <center>
                        Column 3
                    </center>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                    <center>
                        Column 4
                    </center>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                    <center>
                        Column 5
                    </center>
                </telerik:LayoutColumn>
                <telerik:LayoutColumn Span="2" SpanMd="4" SpanSm="12">
                    <center>
                        Column 6
                    </center>
                </telerik:LayoutColumn>
            </Columns>
        </telerik:LayoutRow>
    </Rows>
</telerik:RadPageLayout>

When we rotated the iPad mini to landscape, there were 3 columns, that comes from SpanMd="4" (12/4=3). After rotating to portrait, there was one column, as SpanSm is set to 12.

The issue with right align were not reproduced as well, all columns were centered. Could you provide us with a live URL, so we will be able to inspect elements if there are not some styles that overwrite centering of columns?

Regards,
Magdalena
Telerik

[DogBizPro]

So what is up with this?

https://www.dropbox.com/s/tqiw5yneu27209w/20160701_084246.jpg?dl=0

https://www.dropbox.com/s/ivqkobv8ys8a4q5/20160701_084315.jpg?dl=0

 

You can see that is is NOT right on the iPad mini. Any suggestions?

[Magdalena]

Hello Stephanie,

We are afraid that the issue is not reproduced on our side. Could you please modify the attached tested sample so the issue will be reproduced? When you open a support ticket you will be able to send back to us the modified version, so we can test it locally and can assist you in more efficient way.

Regards,
Magdalena
Telerik