Modules Not Working

[Yossi21]

Hello everyone!

I am familiar with HubSpot Content Webpages, but I am having some issues with some modules. Just started a new position, and the site just went crazy. The first one is regarding some icons that show up on the main site. It shows up in the edit page and the preview, but when made live, it doesn't. It only shows up in Mobile view on a phone. 

The other is each product landing page is missing the name of the product within the product banner. It does not sure up on any devices.Product Banner for Product VehiclesIcons showing up on Edit PageWhen you view on the LIVE SITE.Icons show up on Mobile LIVE SITEProduct Banner on LIVE SITE I have placed some images on this. 

[Wesimplifi_]

Hi @Yossi21 ,

The issue is related to a CSS animation that's hiding your content by default. Here's how you can resolve it:

1. Go to your Design Manager in your HubSpot account.

2. Locate the following CSS file:
   Elgin_August2020/CSS/css3-animation.css

3. In that file you need to change the value (opacity: 0 to 1), look for this CSS rule:

   .animation {
   opacity: 1;
   }

   This change ensures that elements with the .animation class are visible by default, which should resolve the issue with your modules not displaying properly.

[Yossi21]

@Wesimplifi_ thanks for the information. I wasn't able to find the .animation file but I did fix it. I hope, LOL. 

[albertsg]

@Wesimplifi_ Changing the css3-animation.css file will impact any page that loads this file, therefore it's important to fully understand what that file is supossed to do, how it relates to the module functionality and in what other pages it's being used. 

I agree this is the permanent solution but directly modifying the CSS file could create bigger issues on the site if not done properly and with proper knowledge of the file usage 🙂

[albertsg · Accepted solution]

Hi @Yossi21, based on your screenshots I believe I've been able to find your website and the issue. 

If the URL is this one: https://www.elginsweeper.com/ and the issue is right below the "110 years in the sweeper industry" heading, I see the following problem: 

The icons have a class "animation" that currently has the opacity set to 0, making them invisible. 

If I remove that opacity: 0; or increase it to 1, the icons show as you can see in the following screenshot.

So my suggestion is to find where you are setting the opacity of the element to 0. It could be in the module styles or maybe in some CSS you are loading into the page. 

If you cannot find where the opacity is set, you could always add the following CSS code into your page:

.img-title-section .animation {
    opacity: 1;
}

Hope this helps! 🙂

 

[Jaycee_Lewis]

Hey, @Yossi21 👋 Can you share a link to a live page where this is happening? It can be challenging for our community members to troubleshoot issues like this without being able to "see" it in action.

Thanks! — Jaycee