Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 9, 2017 at 9:53 pm #758580
    timothyquinlan

    Hi there, when I have a row split into two cells it will not stack them on IPad mini. I have given them custom CSS classes for each row

    process-1
    process-2

    How do I target them in the custom css to make sure they stack the 2 cells on top of each other?

    Thanks for your help!
    Tim

    March 10, 2017 at 10:18 am #758782
    Vinay

    Hey timothyquinlan,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width:800px) {
	.process-1 .av_one_half, process-2 .av_one_half {
	width:100vw!important;
	min-width:100vw!important;
}
}

    Best regards,
    Vinay

    March 10, 2017 at 7:27 pm #759094
    timothyquinlan

    Hi there, unfortunately it is not working. For the first set of cells it is not showing the second half at all, and the second set of cells are showing how they were before the CSS.

    Any thoughts? I put a link in below.

    Thanks for your support,
    Tim

    March 15, 2017 at 12:03 pm #761340
    Ismael

    Hi!

    What is the actual version of your iPad Mini? Please try the following css code.

    /* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {
     .responsive #top #wrap_all .process-1 .no_margin, .responsive #top #wrap_all .process-2 .no_margin {
        width: 100%;
        display: block;
        margin: 0;
        height: auto !important;
        overflow: hidden;
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {
    .responsive #top #wrap_all .process-1 .no_margin, .responsive #top #wrap_all .process-2 .no_margin {
       width: 100%;
       display: block;
       margin: 0;
       height: auto !important;
       overflow: hidden;
       padding-left: 8% !important;
       padding-right: 8% !important;
   }
}

    Best regards,
    Ismael

    March 17, 2017 at 4:06 am #762307
    timothyquinlan

    Hi there, unfortunately this is not working. It is on an iPad mini 2, which was the first with a retina screen.

    This is what it looks like:

    https://ibb.co/iSxmaa

    you can log in below if you like

    March 17, 2017 at 6:39 pm #762640
    timothyquinlan

    Hi there, is it possible that we just target all ipads and make them stack, would that make the css easier because it would not have to be so specific?

    Any ideas would be great.
    Thanks!

    March 17, 2017 at 7:37 pm #762676
    timothyquinlan

    Here is a link to how the site looks on iPad mini. You can click the menu and click “process” to see how the css is working or not.

    http://mobt.me/Xanw

    Any chance I can get some help on this?

    March 18, 2017 at 6:16 am #762828
    Ismael

    Hey!

    This should work:

    
     .responsive #top #wrap_all .process-1 .no_margin, .responsive #top #wrap_all .process-2 .no_margin {
        width: 100%;
        display: block;
        margin: 0;
        height: auto !important;
        overflow: hidden;
        padding-left: 8% !important;
        padding-right: 8% !important;
    }

    If you want to target the retina device specifically, use the following css media queries:

    // https://css-tricks.com/snippets/css/retina-display-media-query/

    Those css media queries on most retina displays.

    Cheers!
    Ismael

    March 18, 2017 at 9:19 pm #762986
    timothyquinlan

    Hi Ismael, I am sorry, this does not work. The page is now full width cells on ALL computers.

    The only thing I am looking for is having the 50% two-cell rows to stack on iPads.

    Visual composer has an option for this on my other sites, you just tick a box to stay stack columns on mobile.

    There must be a simple way to do this, none of the CSS above works.

    Any ideas? I submitted my login credentials above if you wanted to check it out from the back end.

    March 19, 2017 at 6:44 am #763080
    Ismael

    Hi!

    Hi Ismael, I am sorry, this does not work. The page is now full width cells on ALL computers.

    Please review our suggestions above:

    If you want to target the retina device specifically, use the following css media queries:
    // https://css-tricks.com/snippets/css/retina-display-media-query/

    We added this code in the Quick CSS field:

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

    Please remove browser cache before checking the page.

    Best regards,
    Ismael

    March 19, 2017 at 7:16 pm #763285
    timothyquinlan

    Thank you very much!

    I am hoping that an upcoming version of Enfold might account for more responsiveness? I think it would make this theme much more user friendly, and it is already beautiful!

    Thanks again

    March 19, 2017 at 7:27 pm #763290
    Mike

    Hi,
    Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Stacking cells on mobile’ is closed to new replies.