Custom Module causing page issues

ColmK1997
Participant

Hi, 

 

I made a custom module (PrivacyEngine Reviews)  on this page: https://www.privacyengine.io/products/privacyengine/online-training-1?hs_preview=PxvYpgfN-4803997246...

 

I am happy with the module itself but if you go to the top navigator of the page, "Products" is pushed up and that gap between the menu and the black image has all of sudden appeared. Another couple of things i have noticed is on the form "To Learn More, Contact Us By Filling Out The Form.", when i hover over the properties, the boxes turn green and at the very bottom of the footer the word "Sitemap" is lower down than the words next ti them. 

Can someone please help me fix this? I assume that the custom module has caused this but is there a way to keep that on the page and fix the few problems that i am having? 

 

Thanks, 

Colm. 

 
0 Upvotes
12 Replies 12
natsumimori
Community Manager

Hi @ColmK1997 , thank you for your post!

I wanted to tag in our top contributors in CMS development area- @tjoyce and @albertsg , would you mind sharing your advice for Colm?

0 Upvotes
ColmK1997
Participant

Hi, thank you much if there's someone that could help me get to the bottom of the problems I was having that'd be great. 

0 Upvotes
webdew
Top Contributor | Diamond Partner

Hi @ColmK1997 ,

You can include this css:

div.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
display: inline-block;
float: none;
vertical-align: top;
width: auto;
margin-top: 0;
}
form.hs-form fieldset[class*="form-columns"] .hs-input:focus, form.hs-form fieldset[class*="form-columns"] .hs-input:hover {
border-color: #2a8cd1;
}
.bottom_footer_wrap .hs-menu-wrapper.hs-menu-flow-horizontal > ul li {
margin-top: 0;
}


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 



ColmK1997
Participant

Hi thank you for replying. I have made those changes and this is how the webpage is appearing: https://www.privacyengine.io/products/privacyengine/online-training-1?hs_preview=PxvYpgfN-4803997246...

 

For reference this is the original page: https://www.privacyengine.io/products/privacyengine/online-training?hsCtaTracking=a5e3bd44-766a-42bb...

As you can see there's a gap appearing between the navigation menu and the black image on the new landing page and the form changed in terms of the text size and where the asterix is is placed. Is there a way to keep everything the way it is on the old landing page? 

 

Thanks, 

 

Colm. 

 

 

 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@ColmK1997 - I think you are missing a closing tag or may need to do some investigation here.

You have html code in your CSS declarations... probably a missing HUBL closing tag somewhere in the mobile..

Not sure if this will fix your problem until you find and fix this...

Please circle back if that wasn't causing the original issue

 

Image 2021-06-04 at 1.58.57 PM.png

ColmK1997
Participant

Hi, i have found that tag but I am a little unsure what i need to do to close it 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

can you paste some code?

0 Upvotes
ColmK1997
Participant

Sure, this is that section that contains the missing tag: 

 


html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #54646c;
font-family: {{ baseFontFamily }};
font-size: {{ baseFontSize }};
line-height: {{ baseLineHeight }};
}
.container-fluid .row-fluid .page-center {
float: none;
width: 100%;
margin:0 auto;
max-width: {{ maxWidth }};
display: block;
padding: 0px 20px;
}
.row-fluid [class*="span"] {
min-height: 0px;
}
.body-container-wrapper {
<div style="background-color: #f5f0ec;>
}
.body-container {
}
a {
color: {{ primaryColor }};
text-decoration: none;
{{ transition("color .2s linear") }}
}
a:hover,
a:focus {
color: {{ secondaryColor }};
text-decoration: none;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
hr {
color: #eee;
background-color: #eee;
height: 1px;
border: none;
margin: 20px 0px;
}
[role="button"] {
cursor: pointer;
}
figure {
margin: 0;
}
img {
vertical-align: middle;
height: auto;
margin-left: -6px;
}

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

thanks @ColmK1997 - Actually you just need to fix the code

.body-container-wrapper {
<div style="background-color: #f5f0ec;>
}

 

should be

.body-container-wrapper {
 background-color: #f5f0ec;
}
dennisedson
Community Manager

@ColmK1997 ,

For that margin at above the black banner at the top, I would investigate this css rule which is in the "review_section" module

blockquote + *, iframe:not([title="Optimizely Internal Frame"]) + *, p + *, ul + * {
    margin-top: 1.77778rem;
}

Specifically, iframe:not([title="Optimizely Internal Frame"]) + * is what is adding the margin.

I would be wary of that entire rule honestly.  Using the universal selector  like that is going to cause issues elsewhere.  I am willing to bet @tjoyce paycheck on it

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
ColmK1997
Participant

@tjoyce @dennisedson thank you both for your input, i have made the changes that @tjoyce suggested to the fix, which didn't seem to do anything. I took out the coding from the CCS that @dennisedson suggested and it has gotten rid of that space at the top: https://www.privacyengine.io/products/privacyengine/online-training-1?hs_preview=PxvYpgfN-4803997246... . 

One last thing that I am noticing is that the form has a space between the propery and the astrix (e.g "First name" is on one line then the astrix is on the next line). An example of how it should look is on this page: https://www.privacyengine.io/data-protection-academy , when you scroll down to upcomming webinar you'll see a form to the right, the writing and hovering over the box is also different. Is there a way to restore this to the original way the form looked? 

Thanks, Colm. 

0 Upvotes
dennisedson
Community Manager

@ColmK1997 ,

Looks like you have another offender in that review section module 😥

label > span, legend > span {
    font-size: .88889rem;
    line-height: 1.5;
    font-weight: 700;
    display: block;
    padding-top: .22222rem;
    padding-bottom: .22222rem;
    text-align: left;
}

Specifically, the display: block

I would recommend reviewing that module and adding some scoping to the css so it only targets that module's html

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes