Canvas Support

Issue with different CSS files? (after scrolling)

11 replies · opened Nov 23, 2020

IIntensivedesignNov 23, 2020

Once I scroll downwards and then back upwards, the topmenu changes (canvas logo and different hover styles for the menu).

Also, there's a large white space between the slider and the footer.

How do I solve this?

Thanks again for the great support!

SSemicolon WebSTAFFNov 23, 2020

Hello,

  1. Add the .dark Class to the Slide's main `
  • ` tags to fix this. Example:
<li class="dark" data-index="rs-136" ...>
  1. While we are not seeing any while space in the Footer (see attached), this issue could be due to these HTML Validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.intensivedesign.com%2Fopus%2Frs-demo-double-exposure.html . Fixing these errors should automatically resolve this issue.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSemicolon WebSTAFFNov 24, 2020

Hello,

  1. This is due to the Body Size being small when the Page is Loading. This gets fixed once the Revolution Slider has been loaded. Find and delete the following line of code in the js/functions.js File:
SEMICOLON.initialize.stickFooterOnSmall();

This will definitely work fine.

  1. This is because you have not changed the Logo Images in the following code:
<!-- Logo
============================================= -->
<div id="logo">
	<a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Opus Insights"></a>
	<a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Opus Insights"></a>
</div><!-- #logo end -->

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

IIntensivedesignNov 24, 2020
  1. I deleted that part in the JS. When loading it still shows the whitespace, unless I resize my browser window.
SSemicolon WebSTAFFNov 24, 2020

Hello,

We have just checked this out on your Website and it appears to be working perfectly fine for us! Please clear your Browser Cache and hard-refresh the Page, it should work fine.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

IIntensivedesignNov 26, 2020

I cleared my browers and did a hard-refresh mutltiple times. I also checked the site on other computers in Firefox and the big whitespace is still there. Do you have any additional solutions to fix this?

It looks like it has the same height as the widgets which were previously there.

See: https://www.intensivedesign.com/opus/index.html

SSemicolon WebSTAFFNov 26, 2020

Hello,

Is it possible for you to provide us with a Screencast of what you are seeing, so that we can understand this better? Additionally, please check the Screencast of what we are seeing when refreshing the page.

Meanwhile, you can consider using a Page Loading Transition to display a Loader till the Page is loading: http://docs.semicolonweb.com/docs/getting-started/page-transition/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

IIntensivedesignNov 26, 2020

See this example in Safari on an iPhone.

SSemicolon WebSTAFFNov 26, 2020

Hello,

Okay so we have just checked out the JS File again: https://www.intensivedesign.com/opus/js/functions.js and the following code still exists:

SEMICOLON.initialize.stickFooterOnSmall();

Which is why your page was still displaying white space. Delete all instances of this line and this should automatically fix this. Please make sure that the instructions provided are followed completely to avoid any unnecessary delays and issues.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

IIntensivedesignNov 27, 2020

Thanks!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard