Site does not appear correctly on Mac/iOS devices

Hello,

We are unable to have the site built using CANVAS to render uniformly on MAC machines and/or iOS devices. Not sure why this is. We as developers are able to see the website perfectly on desktops/laptops otherwise. Not sure what we are missing here. Could you please help us resolve the issue?

Site is :
http://1628231282714-sh.bigrock.in.199-79-63-199.plesk-web24.webhostbox.net/biosimilia/Home/Index

Thank you.

Thank you for your response.

Please find attached a few screenshots for your reference. One of the common issues that we are seeing is that the logo (on the top left corner) is not being seen on the MAC as well as any Mobile devices (including ios/android). Apart from that, note how the font sizes in some of the sections has increased out of proportion. We do not seem to have these issues on Windows machines though. We have checked on Windows machines across screen sizes large and small.

With this message, we are attaching some of the screenshots that MAC users are complaining about. In a subsequent message, we are sending you some screenshots of how it looks like on the Windows machines. This should hopefully help appreciate the difference in the displays.

Look forward to your assistance.

Thanks.

Herewith we have attached some of the screenshots as seen on Windows PC's

Thank you for your support.

We have added the retina logo as pointed out. Thank you for pointing that out.

While we check the layout issue(s) on other MAC devices, there are 3 issues that we need to sort here that appears on any platform. They are :

1. On Smartphones, there is a horizontal scroll on all pages except the home page. For eg. on this page :
   http://1628231282714-sh.bigrock.in.199-79-63-199.plesk-web24.webhostbox.net/biosimilia/Products
   How can we fix this?

2. On Smartphones, in the footer, in the Reach us section, the phone number spills to the second line despite availability of space. And, the email appears on a new line instead of with the mail icon. Need to fix this too.

3. On the home page where we have the Revolution Slider, the first graphic that has the illustration of the COVID virus is not seen on mobile phones. Its only the white space that is being seen mostly. How do we achieve it so that the virus objects show and fade away as part of the animation regardless of screen size? Please advise.

Thanks.

Hello,

Thank you so much for your support so far.

Point 1 has been resolved. Will revert in regards to Point 3 and the overall site look on MAC devices soon.

In regards to Point 2, could you please elaborate a little more on your suggested solution? The markup we currently have already renders the phone number/email in a seperate column. Also, this is from one of the layouts from the design. A brief outline of the code is as follows :
<div class="row col-mb-50">
<div class="col-sm-4">
...
</div>

                    <div class="col-sm-8">
                        <div class="row gutter-50">
                            <div class="col-lg-4 col-6">
                                <div class="widget widget_links clearfix">
                                ...
                                </div>
                            </div>

                            <div class="col-lg-4 col-6">
                                <div class="widget widget_links clearfix">
                                ...
                                </div>
                            </div>

                            <div class="col-lg-4 col-6">
                                <div class="widget clearfix">
                                    <h4 class="nott ls0">Reach us</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">[+91 (022) 6688 8888](#)
                                        <li class="mb-2">[biosimilia@gmail.com](mailto:biosimilia@gmail.com)
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Look forward to your feedback.

Thanks a lot!

Thank you for your response. Yes, that has helped solved the issue.

On a different note, we are using parallax on the same page below (See Testimonials section). In this section we find that the display is correct when the page loads initially, however, after having resized the browser once and then back to it's initial size, the parallax feature does not work correctly. (There is a black background that consistently appears beneath the background on scrolling). Could you suggest a fix here?

Further, we noticed that the site does not render well on some of the devices. Attached is a zip file containing a few screenshots on different devices as tested on browsershots. I hope you can suggest a fix on this.

Thanks!

Thank you for your response.

Noted the fact about old browsers. Thank you for pointing that out.

In regards to display on MAC, we checked on our Client's Machine (MAC - Catalina / OS - Chrome ver.92). The screen is 21.5" and the display resolution is 4096 x 2304. There seem to be major issues on how the display is rendered. I have attached some screenshots taken from the client's machine itself (not browsershots or any other browser testing resources).

As an example, note how the menu fonts are blown out of proportion in the header and the texts in the footer too. The spacing seems to be uneven too as compared to what we are seeing on other machines. Although these issues relate to the home page only, similar issues can be noticed on the other pages too.

Hope that helps you to suggest an appropriate fix so that we can close this asap.

Thank you again for your kind support.

Thanks for your reply.

We have just confirmed with the client. They ensured the zoom is at 100% before checking it again. However, the results were the same.

Further, to the last message. We tested the site on our local machines by zooming to more than 100%. Upon zooming in, it was noted that all the texts in the menu, content, footer area magnified uniformly. So, given the client's machine specifications/resolution, if they were browsing this at a zoom of more than 100%, all texts should have proportionately increased which doesn't seem to be the case here.

Please feel free to guide/correct.

Thanks!

Hi,

As developers I can totally relate and understand what you are suggesting.

Are there any specific display settings on the MAC that we can recommend to this client that they can set their machine to, to ensure that the website for once renders correctly? As you might understand and resonate, clients would consider the design faulty unless it looks correctly on their own machine atleast. Also, they reported that they too visit so many modern websites and have found no issues on any other website similar to this.

If we can get this to look perfectly on their MAC (even after amending any of the settings that you could possibly recommned), I think the client would fairly consider the issue resolved as it does not pertain to the design/code per se.

Hope we can get to a solution soon! :)

Again, thank you for your help!

Hi,

My client reports they do not have a problem using Safari browser on the same machine. The problem persists while using Google Chrome though. Any ideas on what could the issue be in this case?

Can you please advise where to find the MAC display settings you shared in your earlier responses? We do not have a MAC and the client is not too techy as well. How do we get to the display settings screen shared earlier and what is the right setting the client should be using?

Further, on the home page we are using Revolution Slider as you can see. In that regards, could you advise the optimal size (w x h) of the images to use so that the display works correctly across devices?

Thanks for your help!

Our slider image size (1st image) currently is 2500 x 1875. It would be better to optimize such that the image size is just right.

Thank you so much for your response and help.

Post my last message, we also had the client check it using Firefox and they report the same issue as with Google Chrome. Although, yes, they confirm that the site looks fine on the Safari browser though.

In regards to your last message, I will have them check their browser settings again, however, I think this might not be the issue since they don't see the texts either large or small at a time. Instead, some elements are blown out of proportion and some are simply way too small than the size set for the respective element. I will anyway get them to check the settings you have sent above and see if that helps.

Further, I had a question, on the home page, we wanted to increase the size of the logo to 130px. However, we note that it does not scale beyond a certain size. Here :
http://1628231282714-sh.bigrock.in.199-79-63-199.plesk-web24.webhostbox.net/

Any ideas?

Thanks!

Thanks for your support so far.

In regards to Revolution Slider, we downloaded the Revolution Slider Visual Editor from the link provided. However, it seems like it needs PHP to run. Is there a way to use the visual editor online on the revolution slider website itself?

We have upto 5 slider images on the home page with the Kenburns effect enabled on the 1st image only. We would like to setup the other 4 images as static as such which should render in it's original dimensions and should scale well responsively. The static images contain background with text (example image attached). However, when viewed on a smartphone, it doesn't render well so as to be able to view the texts correctly. Can you quickly assist us on how this could be best accomplished? (Please see attachment).

On the other hand, how do we enable autoplay on the owl slider? We tried to couple of options but it doesn't seem to autoplay. Please guide.

Thanks.

Thanks for your responses.

As requested, we have received the screenshots for http://themes.semicolonweb.com/html/canvas/intro.html as being seen on the MAC (Catalina) for Google Chrome (Version 92.0.4515.131 (Official Build) (x86_64)) and Safari (Version 13.0.4 (15608.4.9.1.3)). Please find the links below to review.

We have also attached the screenshots of our website from the same MAC for Google Chrome and Safari. The display on Safari is similar to what is seen on other browsers and devices. However, there are notable issues with the display in Chrome and Firefox as can be seen. We sincerely hope this is of help to nail down the issues we are facing and we hope to resolve it with your help and support this time.

Due to high file sizes, we are sharing a link to download the images as follows :

Canvas:
https://drive.google.com/file/d/1iB4ERn2i5bUi0JMbMYrQqTuqqYaLQFGv/view?usp=sharing

Our Website:
https://drive.google.com/file/d/1UUhc59eAvEBn0U_l9AR8zvG708ObduuD/view?usp=sharing

P.S. All the screenshots were at 100% as suggested. Firefox screenshots not attached because these are identical to Chrome display which has issues as noted above.

I appreciate your prompt attention and help to resolve it.

Thank you!

We have personally verified that the clients font settings were set to Medium (Recommended).

Please note that the issue is not with the buttons alone. Even the spacing between elements is differing between Safari and Chrome under the same settings (Medium).

Further, if you see the Chrome screenshots in the "Our Website" folder, you would find that the fonts in part of the footer are larger than they should be and some are smaller (check attachment). If the font size setting in the browser was larger, all the texts across the website would become larger than normal (we checked this by changing the settings on other devices too including our own machines). However, this is not the case here. Also, it may be noted that the issues can be seen in Chrome as well as Firefox.

We also noted that in the screenshots of Canvas the spacing between sections also differs between Safari and Chrome. Please see image attached for this too.

We request you to look into this more meticulously and identify the root cause that is causing these issues. On our end, we have done all that we could to check the browser settings as you have recommended, however, without any results so far. We hope you will take this on priority and provide an appropriate resolution.

Thanks.

Please find attachments here.

Sorry, couldnt add all attachments in one message for some unknown reason. Here's the last one.

Hello,

Thank you for your response.

Please note that the client has already carried out several tests using their MAC (Catalina OS). They have tested (and we have personally verified) that the site works well in Safari but not in Chrome and Firefox. As requested, we have supplemented this with proof via screenshots sent across to you for your review. As requested by you, we also asked the client for screenshots of the CANVAS template and as noted in our earlier messages, we did find anomalies across browsers (as pointed out in the screenshots). I understand CANVAS is being used by so many websites however, that is not something that a client will contend with given the display issues they have notified AND we verified it personally too.

Further, if the client's machine had issues, they would face this on several other websites too. However, in this case too, we have personally verified by testing atleast a dozen websites on their MAC and none of them caused any issues.

Across so much testing that we have done and you've asked us to do, there is no proof of the fact that this is a client's machine issue. Hence, we kindly request you to look into this into greater detail so that we can come to a resolution asap.

Thanks.

Thanks for your response.

Please find a point-by-point response below :

1. We ourselves tested changing the settings from Medium to Large and Small as suggested in our machines AS WELL AS the client's MAC. Fonts increase or decrease depending on the settings "throughout" the page as we would rightly expect. However, as can be seen in the screenshots, if you would have noticed carefully, particularly the footer image, some of the fonts are too large and some have become too small. Note that the sizes will increase or decrease depending on the browser settings throughout the page. We are not relying on the client alone here, and we have run through this test on our machine as well as the client's machine "ourselves". We can send you a video from our machine if you require to verify this. The client is now quite frustrated with this. They have already submitted screenshots as many as requested by us so far. We have to do with what we have to solve this now. We even asked them to send CANVAS screenshots which they have sent us and the issues are noticeable even in those screenshots. We certainly have enough input to find the root cause and resolve it. Still, if you require, we will create a video on one of our machines as requested and send it across. Let us know.

2. Some of the sites that they regularly use and even we tried out on their machines are :
   www.webmd.com
   www.lifeforce.in
   www.askdrshah.com
   www.biosimilia.com
   www.moneycontrol.com
   www.economictimes.com
   and a few other medical related sites

3. Unfortunately, we do not have any MAC devices. Neither does the client have any additional MAC devices. We tried browser simulation websites browserstack.com and lambdatest.com however did not see any issues. Having said that, we have now also personally verified these issues on the client's MAC machine already (not relying on the client's screenshots alone). It was noted that the display settings were at Medium (Recommended). If the client's machine had a problem, the display would not render correct on other websites. Also worthwhile to note that display on Safari (on the client's MAC machine) was correct. Chrome and Firefox did NOT render well. This proves there is a compatibility issue that remains to be fixed.

We hope this gives you enough clue to locate the issue and fix it.

Not sure if this helps you locate what might be of help to fix browser compatibility : https://caniuse.com/

Thank you for your help!

Hello,

We tried the above CSS code including some other fixes to change font-weight to 'normal' instead of '400' and change of fonts. After applying the changes, it looks like the display issue seems sorted for now. Thanks.

Besides this, on the home page we have a section where we would like to have a background HTML5 video. However we would like it to render only on larger devices (ie not on smartphones). When the user is on a smartphone, we would like to have the same section render with a background image (or just color). Could you please advise the best way to accomplish this?

Thank you so much for your help so far.

Regards.

We are following the HTML5 Video section that appears on this page : https://themes.semicolonweb.com/html/canvas/sections.html

Hi,

We get an error on integrating TinyMCE plugin in our Visual Studio project. We are following this page :

http://themes.semicolonweb.com/html/canvas/forms-freelance-quote.html

Build:Cannot find name 'PromiseConstructor'.

We tried to install the TinyMCE package from NuGET as well without any luck.

Please suggest.

Thanks.

Hello,

We have managed to resolve the issue in-house. Kindly consider this solved.

Thanks.

Hello,

We are using the process steps (shortcode) example from Canvas on the website. Typically it shows the icons based on the device width for eg. all process steps on a single line on larger devices and two on a line on tablets and so forth. Is it possible to display two icons on a single line on a smaller device (mobile)? If yes, please help with how can this be achieved.

On the slider revolution, is it possible to have a different set of slider images being displayed based on the device being used? If yes, please let us know more on how to accomplish this.

Thanks.

                
                    
- 
                        [](#)
                        Review cart
                    
                    
- 
                        [](#)
                        Enter Billing/Shipping info
                    
                    
- 
                        [](#)
                        Review order
                    
                    
- 
                        [](#)
                        Make payment
                    
                    
- 
                        [](#)
                        Order complete
                    
                

This is the code we currently have. However, we note that on the desktop view the Order Complete step icon spills over to the next line. Also, noted that in the 'li' class the intellisense suggests we have col-lg-6 and not col-6. Please clarify.

Just a thought, can you let us know if it is possible to hide the process steps on smaller devices? If yes, what is the best way to do this?

Thank you for all your help.

Thanks a lot!

We seem to have two issues on the website specifically with the following :

1. We are using page submenu on this page, however the sub-menu bar (green) keeps scrolling as well. The sub-menu bar should be fixed on the top. Please check the screenshots attached. (This seems to happen only when the browser is scaled to mobile size).

2. We are using a data table as can be seen in the screenshot, however it is not responsive. How do we implement a table such that the display is responsive? Again, please check attached screenshot.

3. Further, using the above code <ul class="process-steps row col-mb-30 d-none d-mb-flex"> as mentioned, makes the process element hidden across all devices rather than making it hidden only on mobile devices. Can you please verify this again?

Thanks.

Hello,

Can you kindly revert with a resolution to the above at your earliest.

Look forward to a prompt response.

Thanks for your help.