My original email to support is below. Update on the problem: I found the jp-playlist to probably be the cause. The margin only happens on pages that include a player and the margin disappears if I remove:

<div class="jp-audio" role="application" aria-label="media player">
                            <div class="jp-playlist"
                                <ul>
                                    <li> </li>
                                </ul>
                            </div>
                        </div>

Still nothing the wiser though on how to correct the problem.

kind regards,

Martin

I investigated further. The main problem lies in the value .jp-audio{width:420px} in jplayer.blue.monday.min.css

Lowering it to 320px solved the main problem. I still get a small white edge on the right of some pages, will let you know if I find a solution there.

I have one other thing: in dark mode the menu button disappears in the header when I scrolled down. This is because it doen not get set to background: white in the dark.css file. I added this code to the dark.css file to solve the problem:

header.sticky .menu-btn > span {
    background-color: #ffffff;
}

Would be nice if that gor incorporated in the source files.

Sorry if I overload you with messages, but I found the last small white margin problem only happens in pages with the slider, I'll try to figure out what setting to change here. I will attach a screenshot of the iphone with the white margin.

And there is another smal bug in the template, the menu falls behind the sticky header, making the top menu items disappear. I solved it for now by shifting the menu items down 80px, but it would be nice if the menu opened in front of the header....

Found the cause of the last white margin as well. Resided in the Artist Bio section, removing p-0 from <div class="container-fluid" p-0> solved the problem. Just hope I will not run into problems elsewhere over this change.

hi Jelly Team,

As I posted in my replies I have solved the issues in the meantime, so apart from the screenshot I already attached on an earlier message, I now can no longer reproduce the problem. But as you can see on the screenshot, there is a white border on the right side of the page. On launching the page everything looks ok, but when I start scrolling I can move the page to the left, leaving a white border on the right.

When I first started there was an even broader border (about a 10opx I would estimate), that was due to .jp-audio{width:420px} not fitting on an iphone 7 screen.

The smaller border in the screenshot I was able to remove by taking the p-0 out of <div class="container-fluid" p-0> of the Artist Bio section.

I ran into two other problems that I feel should definitely be changed in the template:

- the menu button in dark mode disappeares when the sticky header appears, because it is black on a black background. Easily solved by an addition to dark.css.

- the menu itself is not completely visible when the sticky header is on screen, because the menu lies behind the header. I have 'solved' this for now by a padding-top: 85px, so the menu links start under the sticky header, but of course this is not ideal.

Hope I made things clear. Actually I solved most issues myself, but would be grateful for a better solution for the menu disappearing behind the header.

kind regards,
Martin

The website is on https://epk.jazzmosax.com

Would be happy to, but where exactly should I put it ?

Sorry it took a while. Just tested it and it works perfectly fine, thanks.

I have another strange behaviour I cannot get a grip on: in Safari on my iphone 7 the sticky header drops down during page loading and stays down until I scroll down. Happens only in the light theme, not in de dark version. And it happens only in Safari, in all other browsers all works normal. Not a major issue, but a bit akward, any suggestion would be welcome.

This is the requested screenshot of how it looks on opening the site.
And a screenshot of how it should look (and does look on other browsers
than Safari). The sticky header slides down before the first text slides in from
the right. I seem to remember seeing a warning in a browser console about
layout being forced before all css was loaded, maybe that helps ?

thanks,
Martin

UPDATE

I updated to ios 15.4 yesterday and noticed the problem with the sticky header seems to have vanished. Not totally sure it is the update that did it, but happy anyway. Thanks for all the help.

Best wishes, Martin