Ask Question box not re-sizing for mobile

Good afternoon, I have found when I'm on my mobile, the ask question form doesn't re-size for mobile?
http://www.ebonyboutique.co.nz

Also once the form is completed, you get sent to a confirmation page, but the "Close" Button does nothing?

screenshot.jpg

This all used to work, but since updating to newer Instyle version it's broken (note I have also updated Joomla, so that may be causing the issue..)

Ok, found Virtuemart -> Configuration -> Templates -> Use Fancybox was unchecked. This has solved the second part with the message sent box not closing.

But on mobile the fancy box is still longer than the window, with no option to page down?

IMG_3439.PNG

This might be a Virtuemart issue more than a template?

Hi

Please tell me the exact url to the page You have this problem with.

http://www.ebonyboutique.co.nz/current- ... top-detail

Hi

I've just checked Your site and the inner of the popup can be swiped with fingers. Unfortunately I have no recording app on my phone, so I'm showing it on resized screen.

Thanks.

When I try it on my iPhone I can't swipe. It moves the page underneath not the pop up.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:767px) {
body.contentpane {
padding: 0;
}

body.contentpane .width30 {
    display: none;
}

body.contentpane .width70 {
    width: 100%;
}

body.contentpane h1 {
    font-size: 18px;
}
}


Evening,
unfortunately that made no change to the ask question box.
it did however change the font type on mobile devices.
this is how is was before override

IMG_3482 (Custom).PNG

and this is it after override

IMG_3483 (Custom).PNG

Hi

Remove this code than and send me an access to FTP.

Hi

I've added this code to override.css to style it better, but unfortunatelly scrolling is still broken. I'm sending Your access to our programmers. Hopefully they will come up with solution.

Code: Select all

@media only screen and (max-width:479px) {
#fancybox-wrap {
    height: 94% !important;
    left: 5% !important;
    padding: 2%;
    position: fixed;
    right: 5% !important;
    top: 2% !important;
    width: auto !important;
}

#fancybox-wrap,
#fancybox-outer,
#fancybox-content,
#fancybox-content > div {
    min-width: auto !important;
}

#fancybox-content {
    -webkit-overflow-scrolling: touch;
    border: medium none !important;
    height: 96% !important;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 2%;
    width: 96% !important;
}

#fancybox-wrap .fancybox-bg {
    display: none;
}

#fancybox-frame {
    overflow: scroll !important;
}

body.contentpane .width70 {
    float: none !important;
    padding-bottom: 15px;
    width: 100%;
}

body.contentpane .width30 {
    float: none !important;
    padding-bottom: 15px;
    text-align: center;
    width: 100%;
}

body.contentpane .width30 .product-image {
    float: none;
    max-width: 100% !important;
}

body.contentpane td {
    display: block;
}

body.contentpane .floatright {
    float: none !important;
}

body.contentpane h1 {
    font-size: 16px;
}

body.contentpane h2 {
    font-size: 16px;
    line-height: 20px;
}

body.contentpane .formError {
    left: 55px !important;
}
}


Thanks!

Hi

Programmers has checked the issue, but I'm afraid there is no solution to that. Problem is in Safari implementation for iframe. Hopefully next iOS update will fix it.

Ok Thanks for trying.

Hi, it seems with the playing around with the site, now the images on mobile are getting stretched.

IMG_3516 (Custom).PNG

This is a landscape image that is getting stretched to fill the screen.

Try add this to override.css

Code: Select all

@media only screen and (max-width:479px) {
#fancybox-img {
    height: auto;
}
}


Hi, that has made the image stay true, but the light box behind it is still stretching down to take up full screen.

IMG_3546.PNG

Hi

Add this to override.css

Code: Select all

#fancybox-outer {
    height: auto !important;
}


Good morning,

I have been doing some researching on this, and have been told of two possible solutions, but I don't know if either will work with your template?
1. Using css to make the overlay scrollable using touch screen by fixing the body behind?
http://stackoverflow.com/questions/9280 ... -scrolling
2. Using Bootstrap to make the module perform correctly.
http://forum.virtuemart.net/index.php?topic=133177.0

Thoughts?

Hi

Bootstrap is already included and the tip from point 1 is exactly what I've done with my code. My solution worked last time I've been working on a fix for it, but looks like it has been removed now.