Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 1, 2017 at 5:59 am #770223
    santanin

    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.

    April 1, 2017 at 6:09 am #770224
    John Torvik

    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

    April 1, 2017 at 3:54 pm #770339
    santanin

    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!

    April 2, 2017 at 12:58 pm #770612
    Rikard

    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

    April 3, 2017 at 4:39 am #770863
    santanin

    Works perfect!!! Thanks so much!!

    April 3, 2017 at 5:05 am #770872
    John Torvik

    Hi,

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

    Best regards,
    John Torvik

    April 6, 2017 at 5:13 am #772944
    santanin

    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!

    April 6, 2017 at 7:11 am #772974
    John Torvik

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.