Three issues with new website

[yingfuli]

Edit: the bypass password on the Pro Under Construction plug-in doesn’t work. I saw it has been a recurring problem since 2017 (!) so I disabled it for now. This really should be fixed.

Edit 2: the first issue below only occurs on my iPad. On desktop it works just fine.

Hi,

I have three ‘small’ issues with a new website I’m building - https://hebri-flex.nl/

The first is: how can I make the font in the toplinks white when hovering? When you click one you see the graphic element coming is, the red background, at which point the text is still the same red so invisible. Only when the page it links to is active does it change to white.

Second, all pages seem to have some lag when scrolling. As if some script or something is interfering. What could this be?

Third, sometime when changing screen width the slider on the homepage loses its position and expands full screen, underneath other content on the page. See attached image. What causes this? Any suggestions as to how to fix it?

As it should be:

What happens when changing screen breaking point:

[alexander]

Hi @yingfuli

On the first issue (text should be white) this is likely a bug with hover interactions and touch devices. I’ve opened a bug report so we can investigate this further.

The second issue is because you have the smooth scroll plugin active. The plugin adds some javascript that gives scrolling a bit of momentum, which overrides the browsers scroll behavior. To be honest, this was more useful in years past, but most modern browsers have a pretty solid implementation of scrolling at this point. I would simply recommend disabling it unless you really want that effect.

For the slider, from what I can tell it looks like that is a LayerSlider configured to be used full width, but it is constrained by the column. As you’ve observed, it looks fine when the page loads but if you resize the browser to a different breakpoint it doesn’t try to update the dimensions. Would it be ok if we logged into the site to take a closer look at how that slider is configured? Thanks!

[yingfuli]

Okay, thanks. I’ve disabled the ‘full width’ setting of the slider but it still does the same. I need it to be constrained to that one column until it reached the tablet screen.

[nabeel]

Hey @yingfuli,

Thank you for providing the credentials. I checked your page setup and I believe this is happening because of the multiple sections you have for different break points, when the section gets hidden for any breakpoint the slider maybe loses the container’s width and resets itself to fullwidth.

I exported your page template and slider in my local setup and when i removed all the hidden breakpoints for all the sections the problem disappeared. I’d recommend you to use one section for every break-point and use Row’s Layout feature to specify the number of columns in different break-points (see screenshot)

You can learn more about the Row element here https://theme.co/docs/row or see the video tutorial here https://www.youtube.com/watch?v=6pN_a4eD5NM

Hope this helps!

[yingfuli]

The problem with that would be that I have to use different sliders for different breaking points. The lay-out with the slider on one half of the page only works on desktop screens. On the other screens I have a slider with a different width/length ratio,

[ruenel]

Hello @yingfuli,

It is best that you design your slider to be responsive so that you will only have one slider for different screen sizes. You will also benefit from one slider because the page will load faster since only few resources will need to be loaded.

Since you are using Layerslider, please check out this documentation for more information in building a responsive slider with layers on different device screens:

• https://layerslider.kreaturamedia.com/documentation/#builder-layer-devices

Hope this makes sense.

[yingfuli]

The problem for me is that I am trying several things here. On desktop and laptop I want the slider on 50%-40% of the section but I also want it to be top-to-bottom (no padding on top and bottom). I tried at first with setting the section heigth to 100% but that really doesn’t work in combination with the right column which gets really messed up when decreasing screen size. On tablet that is even worse and the reason I put another slider at the top instead of splitting in two columns. For example I tried to set the buttons title ‘responsive’ but when decreasing the screen size to tablet the text won’t shrink with it causing it to overflow.

So, not sure how one section and one responsive slider (they are all set to responsive) can work for what I have in mind.

[rad]

Hi @yingfuli,

I think the issue is with the slider and the flex sizing, could you try wrapping your slider with another div? Like <div class="slider_wrapper">[revslider]</div>, then set the slider_wrapper CSS to display:block; width: 100%;

It has 2 columns which works well, the slider just doesn’t respect that container.

Thanks!

[yingfuli]

I’ll give it another go.

Another issue however: the lag in scrolling I mentioned in the original post above is still there, both on desktop as well as on devices (mobile and tablet). I have disabled ‘smooth scroll’ and cleared cache but it still lags. Can you take another look for me? If need be the credentials in earlier secure note is still valid.

[friech]

Hi @yingfuli,

That lag on scrolling is caused by this second scrollbar.

I see that you set a 7em height on your footer bar, try setting that bar height to auto instead, and use top and bottom padding to give room on the footer content if necessary.

Cheers!

[yingfuli]

How do I do that? I now have three layersliders in use, of which two are in portrait, one is in landscape.

[christian]

Hey Ying,

You just need to write the word auto in the Height field of the Bar.

Hope that helps.

[yingfuli]

Sorry, I responded to a response about the layerslider. The footer is already fixed.

[ruenel]

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.