WebSite X5Help Center

 
Tom W.
Tom W.
User

Footer does not center in small viewport  en

Author: Tom W.
Visited 1856, Followers 2, Shared 0  

Hi,

Having same issue (I think). Take a look at www.context.edu.pl on a mobile. Everything looks great and all fits. This was done using x12.

Now try www.teacherdevelopmentcourses.uk. This was done using x13.

You'll see that you can actually move it horizontally. Even when I switch 'menu always visible' it's still wider than the mobile screen. Seems like the 'always visible' thing still affects the view. Funny though when you do the same thing in Firefox everything is just fine. With ONE exeption. You CANNOT centre the footer. It's always left alligned (of course all settings are to centred).

When 'always visible' is on the uploaded logo is as it should be on the left and the menu on the right but IT'S TOO WIDE.

I tried that on S5 and S7 Edge and get same results.

Thanks for your help.

Tom.

Posted on the
11 ANSWERS - 1 CORRECT
Esahc ..
Esahc ..
Moderator

Trevor, your site looks great on my mobile, but you should make the graphic in the footer narrower if you want it to fit on all mobile portrait views. I think Incomedia are a bit optimistic with their 480px screen width for mobiles, I believe it's more like 380px.

You may also wish to replace/update the graphic visible in the menu on page scroll options, it appears to have become disconnected and only displays the alt text.

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

Trevor, you can modify the breakpoint under template, customisation, resolutions and responsive design. Change Viewport2 to 400 or 380.

Read more
Posted on the from Esahc ..
Tom W.
Tom W.
User
Author

Hey Esahc,

I have the same issue. Check this out www.teacherdevelopmentcourses.uk

This is x13 pro. Now have a look at www.context.edu.pl

The first one was created based on the Polish one. So no responsive settings changed but the Polish one is displayed correctly (I haven't used x13 on it so what you can see was created by x12). So x12 does it properly but x13 messes it up I think. Or maybe there's something I don't know about the new settings in x13.

Glad if you could help on this one.

Tom.

Read more
Posted on the from Tom W.
Tom W.
Tom W.
User
Author

Oh and changing the viewport settings to lower res doesn't solve the issue.

Read more
Posted on the from Tom W.
Andre E
Andre E
Moderator

Tom,

If you want the responsive footer to be correct for all viewports you need to design them 4 times! For every vieport once, the viewports are shown by colour bars and can all be seperatly set / designed. so that the footer looks also good in lower viewports.

See my earlyer post:

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.

Hope this helps,

Read more
Posted on the from Andre E
Tom W.
Tom W.
User
Author

Hi Adre,

That was the first thing I did. All footers have different designs/contents.

Major (good) difference between x12 and x13.

Still the smallest footer is not centred (all other are).

And still it doesn't solve the problem of the view being too wide.

As you can see the Polish website done with x12 works perfectly fine.

Can you think of any other settings that might cause this? If not I guess this needs to be reported to Incomedia to correct as it looks bad on a mobile (it just floats sideways).

Best wishes,

Tom.

Read more
Posted on the from Tom W.
Andre E
Andre E
Moderator

It's probably pushed to the left because the content is too large for the viewport, I am not sure what picture does this because you have a lot in the footer, cut down and select in the smallest footer viewport only the most intrested or importand content for your visitor.

Start with 1 object and see how this reacts then keep on adding until you find the picture or text that is responsible for pushing it to the left. Or stack everything on top of eachother. If you found the object in question try remove it and add it again, maybe some content was not read correctly by x5, else reduce it or remove it.

But again keep in mind that this view is on a very small display, don't fill it too much or stack above eachother instead of next to eachother.

Read more
Posted on the from Andre E
Esahc ..
Esahc ..
Moderator

Tom W, you should create you own post with this problem, but. . . .

If you change the viewport width to 400 or less, it lets you visualise the problem more correctly as for what would display on a phone. I looked at both sites, it "appears" you have not placed the content correctly in the mobile resolution. To date I have not had an issue with multiple sites, as long as I carefully size and place content. I usually make all content of the footer invisible at less than tablet view, then specifically create and place content for mobile view.

Read more
Posted on the from Esahc ..
Tom W.
Tom W.
User
Author

Hi guys,

Thank you for all the help. Found what was causing it. It was the chat script. It was so far to the right I could barely see it in footer settings. Now moved it to the left and works fine.

Again thank you for your time.

Tom.

Read more
Posted on the from Tom W.
Andre E
Andre E
Moderator
Esahc ..
Tom W, you should create you own post with this problem, but. . . .

That I can help you with.

Read more
Posted on the from Andre E
Andre E
Andre E
Moderator

Glad it's solved!

Read more
Posted on the from Andre E