Home Forums ZA WordPress Theme Issue with Mobile View

This topic contains 7 replies, has 2 voices, and was last updated by  BWSM 1 year, 5 months ago.

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

    atishaydesigns
    Participant

    Hi

    We are facing issues with mobile view of the theme. We have done all the work and everything on laptop and desktops looks exactly as we want but when we open the same in mobile view, all things go heywire..
    1) Video Is Not Working
    2) All images are cropped
    3) Slider is cropped
    Can you please suggest what to do 🙁 🙁

    Link

    http://atishaydesigns.com/ZA2/

    can give you the backeend if you want.

    PLZ PLZ PLZ HELP…

    #12642

    BWSM
    Keymaster

    Hi, thank you for purchasing our theme

    1) Did you talk the background video? The background video is forbidden on mobile device, because the browser of iOs doesn’t allow video autoplay. If you want to force video shown, please change the css refer here: http://www.uiueux.com/forums/topic/video-in-mobile/

    2) Because the origin design is cropped the image to fit the wrap. I’ll make some test to check if possible show whole image.

    3) Because the slider is “Fullscreen”, the image need fit the wrap. If you want to show the whole image. Please set the slider as “auto”
    Revolution Slider Auto size

    Cheers!
    Bwsm – uiueux.comTwitterFacebook

    • This reply was modified 1 year, 5 months ago by  BWSM.
    #12647

    BWSM
    Keymaster

    2) Please paste the style code to Custom Css(Appearance / Theme Options / Custom Css):

    @media (max-width: 480px) { 
    .responsive-ux .moudle .list-layout-col,
    .responsive-ux .moudle .list-layout-col3-1 { height: auto; }
    .responsive-ux .list-layout-col3-1 .list-layout-col3-item, 
    .responsive-ux .list-layout-col2-item { height:400px; height:100vw; }
    
    /*re-set the height value for each item height: calc(100vw * x), x = image height / image width  */
    .list-layout-col:nth-child(1) .list-layout-item:nth-child(1) { height: calc(100vw * 1.49); }
    .list-layout-col:nth-child(1) .list-layout-item:nth-child(2) { height: calc(100vw * 1.49); }
    .list-layout-col:nth-child(2) .list-layout-item:nth-child(1) { height: calc(100vw * 1.1); }
    .list-layout-col:nth-child(2) .list-layout-item:nth-child(2) { height: calc(100vw * 0.5); }
    .list-layout-col:nth-child(2) .list-layout-item:nth-child(3) { height: calc(100vw * 0.5); }
    }

    Please refer the screenshot for each item and selector name for css:

    Za theme list layout selector

    #12664

    atishaydesigns
    Participant

    Hi
    Thank you for your reply.

    Slider thing is resolved.
    Mobile view potrait thing is resolved

    Issue that remains is as follows

    1) Mobile Landscape is still an issue. I have tried to replicate your css in 768px but it didnt work well. ITs still cropping the image. Please see if you can send me a custom css for that too
    2) Video is still not playing even after removing the pagebuild css part that is there in the forum. Can you please suggest and alternate. Its a necessasity to play it specially in iphone.
    3) There is one more strange error i found doing this today morning. Wehn i view the site in any android device, i can see the learn more button that comes as hover however when i view it in desktpp or I phone, the learn more seems to adopt the color of the background and becones invisible. You can please check our homepage http://www.atishaydesigns.com/ZA2 .

    Looking forward to your reply.

    #12669

    BWSM
    Keymaster

    1)
    try to update the css as:

    @media (max-width: 768px) { 
    .responsive-ux .list-layout-col3-1 .list-layout-col3-item,.responsive-ux .list-layout-col2-item { width: 100%; height: 100%; }
        .responsive-ux .moudle .list-layout-col{ height: 200px; }
        .responsive-ux .moudle .list-layout-col3-1 { height: 400px;}
        .responsive-ux .list-layout-con {padding: 10px 20px 10px;}
    
    .responsive-ux .moudle .list-layout-col,
    .responsive-ux .moudle .list-layout-col3-1 { height: auto; }
    .responsive-ux .list-layout-col3-1 .list-layout-col3-item, 
    .responsive-ux .list-layout-col2-item { height:400px; height:100vw; }
    
    /*re-set the height value for each item height: calc(100vw * x), x = image height / image width  */
    .list-layout-col:nth-child(1) .list-layout-item:nth-child(1) { height: calc(100vw * 1.49); }
    .list-layout-col:nth-child(1) .list-layout-item:nth-child(2) { height: calc(100vw * 1.49); }
    .list-layout-col:nth-child(2) .list-layout-item:nth-child(1) { height: calc(100vw * 1.1); }
    .list-layout-col:nth-child(2) .list-layout-item:nth-child(2) { height: calc(100vw * 0.5); }
    .list-layout-col:nth-child(2) .list-layout-item:nth-child(3) { height: calc(100vw * 0.5); }
    }

    2)
    please download/unzip, replace this file: /template/page/content-second-fullwidth.php

    3) I don’t understand this question, could you give more tips? Maybe some screenshots would help.

    ps: please send your wp-admin(url/user/pass) and this post via my profile contact form, I’ll test on your site directly. It will be more fast.

    #12671

    atishaydesigns
    Participant
    This reply has been marked as private.
    #12672

    atishaydesigns
    Participant

    sorry just checked again. It seemed there was an error with my cache. Video issue is now resolved

    #12673

    BWSM
    Keymaster
    This reply has been marked as private.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.