-
-
Hello,
Using the BUSINESS CLASSIC, and my client is having some issues and is very adamant about getting these adjusted. Can anybody give me some insight, that would be great. Thank you. His issues::
* Responsive Design – the image rotation is unreadable and does not resize for the screen – it is usable on a tablet but gives the user a poor initial impression on a mobile phone. This is a MUST HAVE feature – the experience should be optimized for mobile, not just ‘usable’ on mobile.
* Responsive Design – Available Lots – image is not clickable at smaller screen footprints nor can it be pinched in and out to expand/contract size. On a tablet only one lot is clickable (20) and it takes the user to Lot 7.
* Responsive Design – Video – does not resize for iPhone – not usable. On a tablet, it’s not obvious that there’s a video to play with the exception of a “play” shuttle icon.
* Responsive Design – general spacing issues at lower screen footprints (too much space between elements) – see next comment.
Thank you!
-
Sorry… here is the link :) https://willowheightsrealestate.com
THANK YOU!
-
Hello,
1-Do you mean this image? I see it’s natural size is 375x260px , while in responsive it goes down to 300x206px. It is normal for responsive mode. If you wish to expand it further then please add this code into your custom css box:
@media (max-width: 767px){ .wpb_single_image img { max-width: 114%; margin-left: -22px; }}Edit the values to your wish.
2-This image is not a link. To zoom in/out it has to have the necessary classes that enable that effect. But this is a simple image. Zooming is not an attribute.
3-4-Add this code into your custom css box, for the video in mobile:
@media (max-width: 767px){ video { width: 354px !important; height: 180px !important; } #content { padding-top: 0 !important;} }Let us know.
Best regards!
-
No, I think it is the images in the slider that they had issues with for 1.
For 2: if I made that a SVG file would that work?
For 3-4… Where is the custom CSS box…
ALSO… is there a way to make the MAP to stop scrolling? When you’re going down your cursor gets stuck on the map and expands that vs. just scrolling the page.
Thanks.
-
Hello,
1-Please be as specific as you can in explaining your issue so we won’t lose any time in fixing the right one.
The slider is being scaled down in proportion of it’s original dimensions. The desktop layout of it is quite wide and not too high. So is normal that in smaller screens it would be even shorter.
To edit it, add this code into your custom css box:@media (max-width: 767px){ .rev_slider_wrapper .rev_slider { height: 236px !important; } }2-No, it needs the css classes that give that effect. Or add these attributes to the current css classes using custom css.
3-4-Go to General Options > Custom Code > Custom css box (screenshot).
5-Yes, please add this code:
@media (max-width: 767px){ #mapDiv { pointer-events: none;} }Best regards!
-
Thank you. Sorry if I’ve been vague. So I’ve added this in there and it appears some of the same issues persist. Like in the map, it still scrolls when the mouse is over it.
Here is my custom CSS that I’ve added so far.
/*#header{ margin: 0 auto; }*/ .services_medium { float:left; } @media (max-width: 767px){ video { width: 354px !important; height: 180px !important; } #content { padding-top: 0 !important;} } @media (max-width: 767px){ .rev_slider_wrapper .rev_slider { height: 236px !important; } } @media (max-width: 767px){ #mapDiv { pointer-events: none;} } -
Hello,
Please edit the map code to this:
#mapDiv { pointer-events: none !important;}
If still no difference, send us your wp credentials in a private reply. So we edit it.Best regards!
-
-
Hello,
Please add this code at the end of hte file ‘js/main.js’:
/*-----------------------Google map disable zoom on scroll----------------------*/ function simpleDisableMapZoom(){ "use strict"; // Disable scroll zooming and bind back the click event var onMapMouseleaveHandler = function (event) { var that = $(this); that.on('click', onMapClickHandler); that.off('mouseleave', onMapMouseleaveHandler); that.find('iframe.googlemap').css("pointer-events", "none"); } var onMapClickHandler = function (event) { var that = $(this); // Disable the click handler until the user leaves the map area that.off('click', onMapClickHandler); // Enable scrolling zoom that.find('iframe.googlemap').css("pointer-events", "auto"); // Handle the mouse leave event that.on('mouseleave', onMapMouseleaveHandler); } // Enable map zooming with mouse scroll when the user clicks the map $('.row-google-map').on('click', onMapClickHandler); }Best regards!
-
Hello! I added that as well and it didn’t work? Any other thoughts, thanks.
-
Hello,
Sorry, my fault. Edit again the file. Instead the previous code add this:
/*-----------------------Google map disable zoom on scroll----------------------*/ function codelessDisableMapZoom(){ "use strict"; // Disable scroll zooming and bind back the click event var onMapMouseleaveHandler = function (event) { var that = $(this); that.on('click', onMapClickHandler); that.off('mouseleave', onMapMouseleaveHandler); that.find('iframe.googlemap').css("pointer-events", "none"); } var onMapClickHandler = function (event) { var that = $(this); // Disable the click handler until the user leaves the map area that.off('click', onMapClickHandler); // Enable scrolling zoom that.find('iframe.googlemap').css("pointer-events", "auto"); // Handle the mouse leave event that.on('mouseleave', onMapMouseleaveHandler); } // Enable map zooming with mouse scroll when the user clicks the map $('.row-google-map').on('click', onMapClickHandler); }Then add this line:
codelessDisableMapZoom();
after this:
/* Fullwidth Google Map */ codelessFullwidthMap();
Best regards!
-
You must be logged in to reply to this topic.