WebSite X5Help Center

 
Trevor G.
Trevor G.
User

Picture background on mobile  en

Autor: Trevor G.
Besucht 2945, Followers 2, Geteilt 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

Gepostet am
23 ANTWORTEN
Andre E
Andre E
Moderator

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.

Mehr lesen
Gepostet am von Andre E
John V.
John V.
User

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... 

Mehr lesen
Gepostet am von John V.
Trevor G.
Trevor G.
User
Autor

OK, I changed to: fit to window; center;fixed background (set on) - still the same I'm afraid.

Trevor

Mehr lesen
Gepostet am von Trevor G.
Trevor G.
Trevor G.
User
Autor

If you compare between desktop and accessing directly on a mobile you will see what I mean.

Thanks for your time

Trevor

Mehr lesen
Gepostet am von Trevor G.
Andre E
Andre E
Moderator

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

Mehr lesen
Gepostet am von Andre E
Serg Linds
Serg Linds
User

Align image position in footer for all screen resolutions.

Mehr lesen
Gepostet am von Serg Linds
Serg Linds
Serg Linds
User

.

Mehr lesen
Gepostet am von Serg Linds
Trevor G.
Trevor G.
User
Autor

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

Mehr lesen
Gepostet am von Trevor G.
Trevor G.
Trevor G.
User
Autor

That said, I can't get that copyright line image to align???

Trev

Mehr lesen
Gepostet am von Trevor G.
Andre E
Andre E
Moderator

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

Mehr lesen
Gepostet am von Andre E
Andre E
Andre E
Moderator

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.

Mehr lesen
Gepostet am von Andre E
Trevor G.
Trevor G.
User
Autor

Thanks, I'll try and sort that picture issue tonight.

Trev

Mehr lesen
Gepostet am von Trevor G.
Trevor G.
Trevor G.
User
Autor

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

Mehr lesen
Gepostet am von Trevor G.
Trevor G.
Trevor G.
User
Autor

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....

Mehr lesen
Gepostet am von Trevor G.
Andre E
Andre E
Moderator

Set the menu prperties in:step2 template customization, drop down menu style, you can set width and margins to get the best fit.

Mehr lesen
Gepostet am von Andre E
Trevor G.
Trevor G.
User
Autor

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

Mehr lesen
Gepostet am von Trevor G.
Andre E
Andre E
Moderator

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....

Mehr lesen
Gepostet am von Andre E
Trevor G.
Trevor G.
User
Autor

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

Mehr lesen
Gepostet am von Trevor G.
Esahc ..
Esahc ..
Moderator

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.

Mehr lesen
Gepostet am von Esahc ..
Trevor G.
Trevor G.
User
Autor

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....

Mehr lesen
Gepostet am von Trevor G.
Andre E
Andre E
Moderator

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.

laughing

Best Regards,

Andre

Mehr lesen
Gepostet am von Andre E
Trevor G.
Trevor G.
User
Autor

Thanks Andre, advice taken. I'll let it be!

Grateful for your help and input [and everyone else of course!].

Trevor

Mehr lesen
Gepostet am von Trevor G.
Andre E
Andre E
Moderator

Good choice,

for the record, it looks good on my mobile (with very small screen) as well.....

Mehr lesen
Gepostet am von Andre E