Homepage panes layout distorted on iPad

  • Mabul

    #49658

    Hi there, just wanted to mention that this issue is still happening – https://forum.graphene-theme.com/topic/homepage-panes-layout-on-ipad/.

    I’ve used 3-4 different devices (at home and in the mac store) to test it out and the problem is still there.

    I understand that if you use Chrome/Firefox’s developer tool to check it out, you will not be able to see the problem i.e. everything looks alright in developer tools but if you use an actual iPad, you will notice that the homepage panes do not line up correctly.

    I’ve tried changing the Columns Layout > Container Style from Boxed to Full Width and Full Width Stretched but this did not help.

    This only happens if you use Homepage Panes. Right now you can’t see the problem in the current Graphene demo because it doesn’t seem to be using Homepage Panes (but as you can see from the screenshot in the post I linked above, the problem is visible in the previous version of the demo).

    Would appreciate if a solution for this could be had.

    Mabul

    #49659

    I was trying to see what could be done and when changing this code (from 50% to 49%), it appears to work:

    @media (min-width: 768px) {
    .col-sm-6 {
        width: 49%;
    }
    }

    After implementing the above code, the homepage panes appear properly aligned on the iPad. Why does this happen? Also, is this a safe fix? Thanks in advance.

    Admin

    Syahir Hakim

    #49667

    The code that you changed is not a safe change as it affects the underlying grid system for all elements using the col-sm-6 grid, not just the homepage panes.

    Can you try adding this code to Custom CSS and see if it resolves the issue:

    .homepage_panes {
    	display: -webkit-flex;
    	-webkit-flex-direction: row;
    	-webkit-flex-wrap: wrap;
    }
    

    Mabul

    #49671

    Hi Syahir,

    Thanks for getting back. Unfortunately the code did not work.

    Am currently using just 2 homepage panes – but both do not appear side by side. Instead, one is on top, and the other is at the bottom (for both portrait and landscape mode).

    6zayn

    #49854

    Hi! Mabul.

    It is not a safe change as it affects the underlying grid system for all elements using the col-sm-6 grid, not just the homepage panes.

    Regards,
    Zayn.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.