CMS Development

ColmK1997
参加者

Custom Module causing page issues

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 いいね!
12件の返信
ColmK1997
参加者

Custom Module causing page issues

@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 いいね!
dennisedson
HubSpot製品開発チーム
HubSpot製品開発チーム

Custom Module causing page issues

@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

0 いいね!
dennisedson
HubSpot製品開発チーム
HubSpot製品開発チーム

Custom Module causing page issues

@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

tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Custom Module causing page issues

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;
}
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Custom Module causing page issues

@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
参加者

Custom Module causing page issues

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

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Custom Module causing page issues

can you paste some code?

0 いいね!
ColmK1997
参加者

Custom Module causing page issues

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 いいね!
webdew
ガイド役 | Diamond Partner
ガイド役 | Diamond Partner

Custom Module causing page issues

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
参加者

Custom Module causing page issues

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 いいね!
ColmK1997
参加者

Custom Module causing page issues

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 いいね!
natsumimori
コミュニティーマネージャー
コミュニティーマネージャー

Custom Module causing page issues

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 いいね!