Shape 5

Joomla Templates => Health Guide - Club => : CentiAdv May 29, 2018, 11:30:04 AM



: Responsiveness on mobile and other mobile-friendly questions
: CentiAdv May 29, 2018, 11:30:04 AM
We launched our new site a week or so ago and have noticed that on mobile phones our homepage is not fully responsive - the text for the sliders overlays the social icons and our "Click or Call" message at the top. Is there a setting I'm missing to make this fully responsive?

Additionally, we use Microsoft Surfaces company-wide and have had numerous associates say that navigation is not working properly - they are just seeing the main menu items, but not the drop downs. Our IT team has looked into this and they are suggesting it is something to do with the coding of the template that registers the Surfaces strictly as a touchscreen (the menus appear correctly when the Surfaces are connect to an external monitor), therefore it is not allowing dropdowns. Could someone help with this as well?

Thank you!


: Re: Responsiveness on mobile and other mobile-friendly questions
: mikek May 30, 2018, 07:14:20 AM
Hello,

Please post a url.

You can disable the onclick functionality under Main/Menu/Onclick For Tablets. I would not recommend turning this off though. If the screen size is less than 10 inches and the device has a touchscreen, it is determined that you are using a tablet and changes the menu from onmouseover to onclick. If the Surface isn't outputting the correct screen size when attached to a third party monitor that is an issue with their software. The script itself just looks at the viewing output that the device is reporting.


: Re: Responsiveness on mobile and other mobile-friendly questions
: CentiAdv May 30, 2018, 10:56:13 AM
URL: http://www.centimark.com/

The website menu on the Surface only displays properly when connected to an external monitor. When it is not connected the menu drop downs do not appear (but are fully functional on other machines). Is there anything that can be done about this?

Thank you


: Re: Responsiveness on mobile and other mobile-friendly questions
: mikek May 31, 2018, 11:57:15 AM
Hello,

You are using custom code to call the image in the main area. You should be using this as per our demo:

<div style="max-height:860px;min-height:500px;background: url('/images/Homepage/Redesign/Background.jpg');"
<video src="images/video.mp4" loop="loop" autoplay="autoplay" muted=""></video>
</div>

If you don't have a video, just omit the second video line. Your text is showing overlapped because your image is too small. There needs to be a min-height call so the image can never get too small, which allows enough space for the text.

Again, you turn off the onclick functionality where I said above. There nothing else you can do beyond that. If it's working when it's connected to an external monitor it should be showing onmouseover and when it's disconnected from the monitor it would show onclick, unless you've turned the feature off in the template settings.


: Re: Responsiveness on mobile and other mobile-friendly questions
: CentiAdv June 01, 2018, 09:29:19 AM
Thank you for those solutions!