Menu on Actual Mobile View

Hello,

I tried to work out on header of my site to make it moble friendly, but still could not make it. On the view pannel, it looks perfectly and responsive with all devices but on the actual mobile view the logo and flag icons turned to very small on mobile screen 480px or smaller.

Not just the header menu, but also this picture is cut off on actual mobile phone view on mobile screen 480px or smaller.
I’m so cuiouse why viewing on back-end at the design pannel everything very responsive, but on the actual view on the phone look different?

Please help ASAP.
Thank you,
s.

Hi Sovann,

Thank you for writing in, after some time of checking I see that you used margin to position things out. Please remove the margins you applied on the logo, flag images, and mobile menu. Then place the logo on a separate Container, set that container’s Horizontal Align to Start this will force the logo on the left-side, set the Self Flex of that container to Standard.



Set the second container’s (containing flags and menu) Horizontal Align to End this will force the flags and menu on the right-side, set the Self Flex of this column to Fill Space.

Again, please remove all those margins on the elements.

This tutorial might be a bit outdated now, but this will help you understand how Flexbox works.
Using Flexbox

Hope it helps,
Cheers!

Work just great thanks.

We are delighted to assist you with this.

Cheers,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.