Helix Ultimate rendering issue

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.

No problem from here.

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-activated!

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

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.

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

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?

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.

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

Code for both sites is as described above.

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.

???
Nothing has changed.

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

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.