Hello,
I have a small problem with my first Xway test online site. When I go on a mobile, the home page as well as the legal notices page appear very slightly too wide (barely 1mm), I have to pinch with two fingers for the display to be full screen on my iPhone. It does not do it on the gallery, members and contact pages. I tried just about everything and nothing to do. Do you have any idea? I designed my pages on the model of the header-main-footer tutorial in flex (master page).
A clarification: the width problem appears larger on Safari than other browsers. On Edge, only the home page is concerned, the legal notices page is displayed correctly unlike with Safari.
Is there a URL that we could look at?
DM sent. Thank you for your help.
You’ve set pixel widths on some of the boxes on the home page and legal page. You’ve also added some margins and padding that are set in rems: a rem is based on the root font size, which is normally medium (16px) unless you change that, so these are effectively pixel measurements (1 rem = 16px)
In the case of the home page, there is a page wrapper (pagediv) that has 1rem left and right margins (32px), a main section that has 1rem left and right padding (32px), and some boxes within the main section that are 350px wide. Adding those together, your page takes a minimum of 350 + 32 + 32 pixels width, so it won’t fit on a device that is narrower than 414 pixels wide.
Generally, I think it’s a good idea to design pages that will fit on devices that are as narrow as 320 pixels wide (a small phone or iPod Touch), so you don’t really want to have boxes that are wider than this. In most cases, I would avoid setting any kind of pixel width for most boxes. You might want to set a maximum width (e.g. 1200px for boxes containing text, so the text lines don’t get too long).
I don’t think I would use rems for margins and padding. These are the same size on any device (unless you’ve set the root font size differently for different breakpoints), so they’re essentially inflexible (like pixels). I sometimes use small pixel values (e.g. 10 px), but another option is to use vw units for horizontal margins and padding so that they will be narrower on narrow devices (1vw is 100th of the width of the viewing area).
Phones and tablets come in a wide variety of sizes, so you’re likely to miss problems if you only test with your own phone. A good way to test for multiple devices is to use Safari’s Responsive Design mode. This allows you to resize the viewing area so you can see how a page will look on anything from a small phone up to a large computer monitor. Ideally, you want pages to be readable (without horizontal scrolling) on any device that is at least 320px wide up to 1600px or wider.
1 Like
Thank you very much for your detailed response. I added margin and padding in order to try a lot of things to fix my issue. At first, it was out of the box, except for the pixel width for two boxes (so here’s the problem). I’ll try all your suggestions tomorrow or after tomorrow and let you know.
I’m totally agree with VW and VH, just needed to start my brain to use it 
and also with 320px wide. 
Thanks again very much.
ADD : Well, as I was impatient to test it, it’s done. Everything works perfectly (after emptying Safari’s caches of course).
A very big thank you for your help and support, I greatly appreciate it and will do everything possible not to abuse it.