Picture background on mobile
Author: Trevor G.
Visited 2985,
Followers 2,
Shared 0
Hi folks
Using an X5 tremplate here: www.theparkinn.co.uk
This is work in progress and looks fine on desktop PC screen. On mobile or tablet the pictures used in the background do not resize?? It's OK if I resize the browser window on the PC but if I go to the site on a mobile or tablet the background pic seems to go out of size??
Any ideas?
Thanks for your time
T
Posted on the
Did you set the background picture in the graphics tab of the page properties (step3)
Then change settings to: fit to window; center;fixed background (set on)
see if these help.
I had some problems like that as well. At last I downloaded the 'Firefox' (browser) for android on to my phone (for free)....and everything was ok. If this is also the case with your question, then it is a browser-thing...
Author
OK, I changed to: fit to window; center;fixed background (set on) - still the same I'm afraid.
Trevor
Author
If you compare between desktop and accessing directly on a mobile you will see what I mean.
Thanks for your time
Trevor
that setting works good on my sit, and yes I have seen what the problem is.
Try a smaller picture like 1075*660 (about half what you have now) and use jpg.
This helps also load faster on instruments with less connection speed
Align image position in footer for all screen resolutions.
.
Author
Thanks you guys. I'll change my copyright alignment, thanks.
The picture thing still doesn't work. I have reduced the size as you suggested but it still will not resize properly [albeit differently now so this must be the source of the problem].
Weird??
Trev
Author
That said, I can't get that copyright line image to align???
Trev
At some point the widht of the screen will be smaller then the width of the picture, from then on it will zoom in on the picture and start leaving the borders from view. If you want full view then make the picture as small as the smallest screen. But that might give you a wors look on full screen, so you need to middle this a little. You could make it a bit smaller, just try out what works best. But I would not make it a lot smaller then it is now. It still gives you an idea how it is, and on smaller screens to fit the full width of the picture would also look strange
To set the footer correct for all viewports, check your preview in x5, set the view port to the lowest part for every colour. Set in this position the footer objects to be shown correct. Do this for all colour bars, you can select them in the footer on the left, in the preview they are on top.
Small tip, you can remove some less importand items in the smallest viewport else you have a big footer or it's not clear to read. Or set it all if it fits, that's up to you.
Author
Thanks, I'll try and sort that picture issue tonight.
Trev
Author
Man. You boys are great. I'm all good to go now. One last thing [!] When the site is viewed on a mobile it's fine except when [as it should] the menu moves to the 'bar' icon configuration in the header the menu that pops in from the right hand side only moves in half way [in the width]. The menus works OK but it doesn't look right. Any ideas?
Thanks again!
T
Author
Actually, I can see that the whole site is a bit too 'wide' for mobile. Not sure how this has happened as it works fine when reducing it in the browser window within X5....
Set the menu prperties in:step2 template customization, drop down menu style, you can set width and margins to get the best fit.
Author
Hi
Thanks for the help so far. If you can access the site on a mobile [portrait] you will see the strange menu issue. Can't figure it out! I can't seem to get the footer image to adjust to the mobile width like the other. Frustarted because it looks lovely on the PC!
Thanks for your time
Trevor
remove the meanwhile jump in or set it atleast once and not constantly. cause when I use on my pc a smeller screen I can't even open the hamburgermenu. (I click it away to get to the menu and then it jumps back in.
The footer looks good it does not fit entirly on the smallest screen on my pc but on my android the menu and footer are the same as on mu pc.
A good website is simple not too much things that move around....
Author
OK folks, moved all the footer images more carefully for all viewpoints and now the menu and the site looks fine on a mobile. One last thing. The picture in the background is great on desktop and in all the size previews when working within X5 but the mobile view seems to have a pixellated image. Is this because the mobile format is zooming in on the picture? Maybe I need a higher resolution?
Andre, took your advice and removed the advertising message. Better now.
Once again, thanks for your time..
Trev
Trevor, your site is fine on my mobile down under.
However, the logo shown on the left when the menu scrolls down is still not displaying on either my PC or mobile.
Author
Hi Esahc
It's fine on tablets and desktop but on my Sony Z3 it's definitely pixelated, see attached. Can't seem to work this out....
Trevor,
It's close to impossible to get the website on all devices / operating systems / hardware and all these for several soft and hardware versions and viewports and serviceproviders (from website and customer) firewalls .... in all kind of combinations...... to get it correct all the way.
It is a background picture, it's there to create an feeling/impression.....and isn't that what it does?
I mean, give it a try in a higher resolution and try a lower, pick the best one out and then let it rest.
The most important thing is that your website can be found and it's viewer friendly. And that viewers find what they are looking for.
It is offcource your decision but that's just my advice and don't get me wrong here, I mean in it in a very positive way.
Best Regards,
Andre
Author
Thanks Andre, advice taken. I'll let it be!
Grateful for your help and input [and everyone else of course!].
Trevor
Good choice,
for the record, it looks good on my mobile (with very small screen) as well.....