WebSite X5Help Center

 
Gary M.
Gary M.
User

Responsive display issue with smart phone display  en

Author: Gary M.
Visited 942, Followers 1, Shared 0  

I am using Website 5X Evo.  Having issues with the responsive design on my website www.folliott.ca. The issue is with the display for smart phones from 0 to 640px. I have a directory called Family Details with four different families. Rather than using the whole screen to display the file, it is only utilizing the middle third of the display when viewed on my iPhone 8 and assumme it is the same for other smart phones. On sizes ababove 640px, the display is fine and untilized the full scrren. I have never had this issue before and have other websites where this is not an issue, it uses the full display area of the iPhone. The files that have the problem are linked to to another directory on the host server which is located within the website itself. The reason I link to the files is that they are created using Legacy 9 software that generates the web pages and no further rendering is required. It does not appear to be caused by settings in the Legacy software.
I have tried every setting possible but can't fix the issue. I have attached an image of what the display looks like. Any suggestion for a fix. 

I have attached an image of what the screen is displaying or you can go to www.folliott.ca and then select Family Details from the menu. Select any of the four files to check it out if you have an iPhone or smart phone.

Posted on the
2 ANSWERS - 1 USEFUL - 1 CORRECT
Esahc ..
Esahc ..
Moderator

Gary, the page appears to be opening in a showbox, have you tried all the options to see best effect on mobile/tablet? Perhaps open in new window?

PS it behaves exactly the same on my android as it does on my PC with browser set to various widths, except at mobile the showbox is full width on android but on desktop at 480px the showbox is too small to be useful.

Read more
Posted on the from Esahc ..
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... possibly, ... leaving things as they are now, ... you could try using a little EXTRA code:

<style>
@media (max-width: 639px) {
#imShowBox{position:absolute; width:92% !important;height:90% !important;left:5px !important;top:50px !important}
#imShowBox *{ position:absolute; width:100% !important;height:100% !important;left:0px !important}}
</style>

... code to be pasted in the section:
>> Step 1 - Settings > The Advanced section > Statistics, SEO and Code > Options in the Code section | Custom Code: (3°) > ▼Before closing the HEAD tag

.

ciao

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪