Link to section ID's

[cvdw]

Hi,

In this page I gave sections an ID name (woensdag, donderdag, vrijdag, zaterdag, zondag) and the buttons under the Intro linking to #woensdag, #donderdag, #vrijdag, #zaterdag, #zondag but when clicking the button, not moving to the Section ID. Why not…?

https://cresult.nl/royallightfestival/programma-2/

Regards, Carel

[ruenel]

Hello Carel,

Thanks for writing in!

I have saved your page as a template and imported it to my local testing server. I Could not replicate the issue.

• See the video in the secure note.

It could be a 3rd party plugin that is causing this. Please test for a plugin conflict by temporarily deactivating the plugins one at a time.

Best Regards.

[cvdw]

Hi,

I found the problem:

I’m using this css in the Global; CSS the get the fixed background I want:

body {
background-image: url(‘https://cresult.nl/royallightfestival/wp-content/uploads/2023/02/royallightgradient-landscape.jpg’);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
height: 100vh;
}

@media screen and (orientation: portrait) {
body {
background-image: url(‘https://cresult.nl/royallightfestival/wp-content/uploads/2023/02/royallightgradient-portrait.jpg’);
}
}

The height: 100vh; causes the problem but without height: 100vh; the fixed background is not working on mobile and the light effect (what is important because the site is about light) is gone.

Do you know a way to keep the fixed image effect also on mobile and have the navi to anchors also working?

https://youtube.com/shorts/hjCPnx3yxsM (with height: 100vh;)

https://youtube.com/shorts/Ul26MR1vTXQ (without height: 100vh;)

THX, Carel

[mircotripoczky]

Not sure if that will help, but you could create an empty section that’s on top of all others. Give that section a background image and edit the element css:

$el {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1 !important;
}

You can also add top: 0; in case you have a transparent or semi transparent static header and want the background also behind that header. And you could also add media queries here if you want to switch the background from landscape to portrait and override the sections background image.

That way you have a fixed background image that works on mobile (tested on my iPhone).

[cvdw]

Hi!

Yes that’s working! I made two sections, one for desktop en and one for mobile with the different bachground images ans media queries.

But now I have to put those Sections to every page?

There is no working option by global CSS so I don’t have to start every page with those sections?

THX, Carel

[mircotripoczky]

Hm… didn’t think of multiple pages. Sorry.

I managed somehow to use this workaround within the header (just with “bars” instead of “sections”) so it only has to be done once, but that means you have to change the background color of all .x-section to transparent at the global css.

.x-section {
  background-color: transparent;
}

Not sure if that’s practical.

On the other hand, setting the body to 100vh as in your css code is also not so good, especially on mobile, because at first the URL input bar is visible but not calculated into the viewport height and when you start scrolling the content may jump. You could use height: 100dvh; (dynamic viewport height) or height: 100svh; (smallest viewport height). But these are not supported by all browsers and didn’t work on my iPhone. So adding another a fallback may be helpfulheight: 100%;.

I think it’s easier to use the themes Global options and set the background color to transparent and set a background image for the whole site at “Layout and Design” (this adds a JS to the site which “injects” a DIV with the class “backstretch” which contains the image). Then you add some media query to manipulate that DIV. So the css at global css should be like this:

@media screen and (max-width: 480px) {
  .backstretch img {
    display: none !important;
  }
  .backstretch:before {
    background-image: url("your-mobile-background-image");
    background-size: cover;
    background-position: center;
    display: inline-block !important;
    width: 100%;  /* or fixed pixel values */
    height: 100%; /* or fixed pixel values */
    content: "";
  }

to replace the background image for mobile devices.

I tested it on my iPhone and the background is not scrolling. But the image may “jump-scale” once you scroll down or up, because the viewport is changing (URL bar of your mobile browser goes away, once you scroll down and comes back when you scroll up). If you use px instead of percentage or viewport units (px values a bit wider and higher than the mobile screen) you can avoid the “jumps”.

[marc_a]

Hey @mircotripoczky,

Thank you always for chiming in, we really appreciate your time and effort.

Cheers!

[mircotripoczky]

Thanks @marc_a.
Reading here and sharing some ideas is the best way to learn and become better in what I’m doing

[ruenel]

You are most welcome.

[cvdw]

@mircotripoczky

Thank you so much!
Yes, this is working perfect for me!

THX for thinking with me and the perfect solution!

Best regards,

Carel

[tristup]

Hi Carel,

Glad that you get the solution.

Thanks

[mircotripoczky]

@cvdw glad it worked for you

[tristup]

Hi @mircotripoczky,

Thanks for sharing the solution.