Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #770223

    Good day. My site looks awesome on desktop, mobile, and iPad Mini landscape. But it does not look good on iPad Mini Portrait due to the issue of having elements across 3 columns and grid layouts with 2 columns. I have seen some posts about this, but not too many, and I was not able to find my answer.

    I found this code from one of your threads that solved the issue of my 2 and 3 column layouts that had simple elements like the image element and the text block element. On the iPad Mini portrait, the photos and text block no longer appear next to each other, but now appear stacked like on mobile using this CSS:

    @media only screen and (max-width: 890px)
    {
    .flex_column { width: 100% !important; margin-left: 0 !important; }
    }

    So that’s good. However, the Grid Layout elements still appear next to each other, which looks awful on the iPad Mini portrait view. The above CSS did not make them stacked. Can you offer some additional CSS that will make the Grid Layout columns to become stacked on the iPad Mini portrait (just like it happens on a mobile device)? I provided a link to my staging site in the Private Content area if you need it.

    Thank you.

    #770224

    Hey santanin,

    I am sorry, but I didn`t understand your question very well, may you explain it better with screenshots?

    Best regards,
    John Torvik

    #770339

    No problem. In the private content area, I provided links to to images. The image called “grid-layout-ipad-mini.jpg” shows 2 columns of progressive bars in a 2 column, 1/2 by 1/2 grid layout. As you will see, the two columns of progressive bars are next to each side by side and way too skinny and the words run into each other. The image called “grid-layout-mobile.jpg” shows each of the 2 columns of progressive bars laid out on top of each other, stacked rather than side by side. Hoping you have some CSS that forces the columns in a grid layout to stack rather than displaying side by side on an iPad mini like they do on a mobile. As I mentioned, it looks great on a desktop and on an iPad Mini landscape orientation. The problem is with the iPad Mini portrait orientation. Thanks!

    #770612

    Hi,

    Thanks for the screenshots. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .responsive #top #wrap_all .av-flex-cells .no_margin {
        display: block;
        margin: 0;
        height: auto !important;
        overflow: hidden;
        padding-left: 8% !important;
        padding-right: 8% !important;
        width:100% !important;
    }
    }

    Best regards,
    Rikard

    #770863

    Works perfect!!! Thanks so much!!

    #770872

    Hi,

    Let us know if you have any other questions or issues :)

    Best regards,
    John Torvik

    #772944

    Hi again. One more quick question. Can you also provide CSS on how to make this work on an iPad Mini in landscape orientation? Your code makes everything look so nice in the iPad Mini portrait orientation, I wanted to make it looks the same in landscape orientation. Thank you!

    #772974

    Hi,

    The iPad mini landscape resolution is exactly 1024px, so, you need to increase 1px in the media query, staying like this:

    
    @media only screen and (min-device-width : 768px) and (max-device-width : 1025px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .responsive #top #wrap_all .av-flex-cells .no_margin {
        display: block;
        margin: 0;
        height: auto !important;
        overflow: hidden;
        padding-left: 8% !important;
        padding-right: 8% !important;
        width:100% !important;
    }
    }
    

    Best regards,
    John Torvik

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

You must be logged in to reply to this topic.