Hi there,

Thanks for contacting us. Sorry for the inconvenience. Please share an real-time device screenshot.

-Thanks

What do you mean with "real-time device screenshot"? I sent you already screenshots of the behaviour. Get your mobile device and try it out!

When you rotate your device then you need to reload your page. Thanks

Cause, Javascript need to load to resize webpage.

-Thanks

Why could that not be done automatically? Browsers are aware of rotation, they also report the monitor resolution (width and hight are swapped by rotation).

Javascript file need to load for the device size wise. Webpage responsive workd by their viewport size. That's why need to reload the javascript. Thanks

But why is only the header affected? Other parts of the page are displayed correct. Even the footer is correct.

Add this css code inside the custom.css file and check again.

#sp-header {
    width: 100%;
}

Hi Toufiq, I am sorry, but this solves not the problem.

Anyway, the bug occurs not only with mobile devices changing orientation. It can be seen also on desktop browsers. If the page is started with a smaller window width and subsequently the width is increased, the header remains in size.

The bug occures only in boxed layout mode for both, desktop and mobile.

Perhabs this helps to find the root cause.

Best regards

Will you please provide me the Joomla administrator access to check the issue?

Sorry, this is not possible, because of privacy issues.

I just checked this site and it works fine.

http://helix-framework.org/

Hi Toufiq, yes of course, your site is working fine! I made a Mockup of our site containing only the public stuff, so you can check.

But now I recognised, that it is the sticky header! If sticky is switched off, it works fine also.

To be precise: the bug occurs if both sticky header and boxed layout are enabled. If one of them or both are disabled, then it works fine.

I think your server is slow here. Tried to open template settings it's loading....

No problem from here.

Please check now. Thanks

Hi Toufig, now it works fine with mobile devices, but with desktop browsers the header ends beyond the box at the right border of the view port.

Modification to absolute value

header#sp-header { max-width: 100% !important; width: 1240px !important; }

keeps the header inside the box. I think this is an acceptable workaround, or have I something overlooked?

Thanks for your effort!

The other way round is more logically:

header#sp-header { max-width: 1240px !important; width: 100% !important; }

The result is the same.

Re-active your site administrator access. Thanks

re-activated!

Please check now. Thanks

This version works neither on desktop nor on mobile. Did you ever test?

I have checked both side area. Please clean your mobile device cache.

I have cleaned my moble device cache now. Thanks for the hint. On iPhone it works fine now.

On iPad it is still buggy. The same on desktop. iPad changes from mobile view to desktop view when turned from portrait to landscape orientation. I think this is the reason for the behaviour on iPad. It's a desktop view issue.

So, the mobile phone view is fixed now. But the dektop view is still not solved. One more step is needed.

Will you please check again and let me know your device size. Thanks

Hi Toufiq, I provide you with 5 screenshots. You may see the size in Firefox Inspector.

01.png: max. mobile view; also selected area is shown (width 974 px) 02.png: min. desktop view; menu change (width 975 px) 03.png: max. size before header shrinks (width 1007 px) 04.png: size when header shrinks (width 1008 px) 05.png: max size of boxed design (width 1240 px)

https://drive.google.com/drive/folders/1se3XrOQfU8rdpzMN1Xlz5-gMTYaBS8hg?usp=sharing

Please check your website realtime ipad. Cause, Just now i have checked your website on real time ipad 12 inch and it works fine with landscape with regular mode. Thanks

Hi Toufig, I think we talk past each other. On the mockup https://test.fcl-leo.de is your code, which works not correct:

@media screen and (max-width: 920px) and (min-width: 320px) { header#sp-header { max-width: 100% !important; width: 100% !important; } }

On our homepage https://fotoclub-leonberg.de is my code, which works well:

header#sp-header { max-width: 1240px !important; width: 100% !important; }

Which one did you test with your iPad?

I have checked this site.

https://fotoclub-leonberg.de/

But also on https://fotoclub-leonberg.de the bread-crumb-navigation is not recovered on both iPad and Desktop. Header and menu are ok. Bread-crumb-navigation is recovered after reload only.

Can you share an screencast video?

screencast videos: https://drive.google.com/drive/folders/1UsFoeHy6o7NpZS8wzd4_sabrnXp2AZpT?usp=sharing

Code for both sites is as described above.

Please capture a video of real-time device. Not from browser of computer. Thanks

What do you mean with real-time device? Screencast from iPad?

iPad screencast videos and photos: https://drive.google.com/drive/folders/1QuGhZvVcmrHYEP2AEi1zJ40iJV3edLro?usp=sharing

On the videos the light gray background of the header can not be seen, but on the photos it is depicted.

You can see the same issue as on computer.

Please check this site breadcrumb issue.

https://test.fcl-leo.de/

??? Nothing has changed.

Please clean your Joomla and browser cache. Thanks

Both cleaned, no difference!

I found a workaround. If sticky header offset is set zu any positiv value (e.g. set to 1), then the breadcrumb issue disappears. I have implemented on https://fotoclub-leonberg.de

Does solve your issue?

Hi Toufiq, for the moment yes. It is not perfect, but good enough.

Anyway, it would be desirable to investigate the root cause of that bug (boxed design + sticky header + sticky offset = 0) and fix it for the next release.