Issue with Mobile View

[atishaydesigns]

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…

[SeaTheme]

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: https://seatheme.net/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”

Cheers!
Bwsm – uiueux.com – Twitter – Facebook

[SeaTheme]

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:

[atishaydesigns]

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.

[SeaTheme]

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.

[atishaydesigns]

This reply has been marked as private.

[atishaydesigns]

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

[SeaTheme]

This reply has been marked as private.

[Author]

Posts