Website alignment Safari

SimonIG10 wrote on 3/21/2021, 2:20 AM

Hi

I have noticed in Safari that on an IPad/IPhone the site aligns okay (centrally)in portrait but when I rotate the device to show in landscape then revert back to portrait is seems to then be too far aligned to the left. Is there a setting to force it to centre? It doesn’t do this on an Android device it seems. Also what is the best resolution to create a website in to achieve best compatibility between PC and mobile devices?

Comments

johnebaker wrote on 3/21/2021, 5:03 AM

@SimonIG10

Hi

The rotation problem you are having is a Safari issue which you cannot 'fix' in Web Designer.

. . . . Also what is the best resolution to create a website in to achieve best compatibility between PC and mobile devices? . . . . .

There is no 'best resolution' as the viewer devices can have many different screen resolutions and aspect ratios.

Web Designer takes care of this for you by inserting code that detects the viewing devices screen resolution and adjusts the presentation accordingly when loaded into the viewers web browser.

HTH

John EB
Forum Moderator

 

VPX 16, Movie Studio 2025, and earlier versions 2015 and 2016, Music Maker Premium 2024.

PC - running Windows 11 23H2 Professional on Intel i7-8700K 3.2 GHz, 16GB RAM, RTX 2060 6GB 192-bit GDDR6, 1 x 1Tb Sabrent NVME SSD (OS and programs), 2 x 4TB (Data) internal HDD + 1TB internal SSD (Work disc), + 6 ext backup HDDs.

Laptop - Lenovo Legion 5i Phantom - running Windows 11 23H2 on Intel Core i7-10750H, 16GB DDR4-SDRAM, 512GB SSD, 43.9 cm screen Full HD 1920 x 1080, Intel UHD 630 iGPU and NVIDIA GeForce RTX 2060 (6GB GDDR6)

Sony FDR-AX53e Video camera, DJI Osmo Action 3 and Sony HDR-AS30V Sports cams.

SimonIG10 wrote on 3/21/2021, 6:01 AM

Thanks for the quick response and great advice. Looks like I will have to live with that problem. I tried using Firefox on the Ipad and the problem is gone.

I am a relative rooky when it comes to Web design but have now discovered variants which looks to be the way to go in order to make the site more mobile friendly (and readable). I have been watching a few videos this morning and now have a mobile and main variant website. I wondered what is the optimal settings for variants. Mobiles seem to be 480 but wondered what is best for laptops/PCs. is it best just to have main and mobile or do some sites have maybe 3 variants?

emmrecs wrote on 3/21/2021, 6:25 AM

@SimonIG10

I think you are "over-thinking" this!

Did you read carefully what @johnebaker wrote in his reply to you:

Web Designer takes care of this for you by inserting code that detects the viewing devices screen resolution and adjusts the presentation accordingly when loaded into the viewers web browser.

I have deliberately highlighted certain phrases!

Jeff
Forum Moderator

Win 10 Pro 64 bit, Intel i7 Quad Core 6700K @ 4GHz, 32 GB RAM, NVidia GTX 1660TI and Intel HD530 Graphics, MOTU 8-Pre f/w audio interface, VPX, MEP, Music Maker, PhotoStory Deluxe, Photo Manager Deluxe, Xara 3D Maker 7, Samplitude Pro X7 Suite, Reaper, Adobe Audition 3, CS6 and CC, 2 x Canon HG10 cameras, 1 x Canon EOS 600D, Akaso EK7000 Pro Action Cam

SimonIG10 wrote on 3/21/2021, 10:23 AM

Thanks for pointing that out. My site does scale to the various devices but some text is very small when on an iPhone etc (unless you stretch it on the phone). I quite like the variant idea where I can customise the look/text size etc depending on if it’s a laptop or a phone. I followed the Xara coaching video explaining this and it looks good. However, I wondered what are the accepted widths to use for typical laptops and mobiles (and if you need a tablet variant as well). Mobiles seem to be 480 but not sure if it’s 720 or wide for laptops.

johnebaker wrote on 3/21/2021, 11:07 AM

@SimonIG10

Hi

The actual size depends on the template you use, however you can adjust the page widths independently for the Mobile, 640px (if present) and Main using the Page Options, Page size dialog.

The current width setting of 960px is the optimum to cater for most viewing devices that do not identify as mobiles, this setting does not include the browser's vertical scroll bar which can be up to 24px wide or other sidebars which may be turned on in the browser.

John EB

VPX 16, Movie Studio 2025, and earlier versions 2015 and 2016, Music Maker Premium 2024.

PC - running Windows 11 23H2 Professional on Intel i7-8700K 3.2 GHz, 16GB RAM, RTX 2060 6GB 192-bit GDDR6, 1 x 1Tb Sabrent NVME SSD (OS and programs), 2 x 4TB (Data) internal HDD + 1TB internal SSD (Work disc), + 6 ext backup HDDs.

Laptop - Lenovo Legion 5i Phantom - running Windows 11 23H2 on Intel Core i7-10750H, 16GB DDR4-SDRAM, 512GB SSD, 43.9 cm screen Full HD 1920 x 1080, Intel UHD 630 iGPU and NVIDIA GeForce RTX 2060 (6GB GDDR6)

Sony FDR-AX53e Video camera, DJI Osmo Action 3 and Sony HDR-AS30V Sports cams.

SimonIG10 wrote on 3/21/2021, 11:31 AM

Thanks John, I will give that a try.