Space and background color on section

ColmK1997 · ‎Jun 16, 2021

Hi,

Can someone please show me how to get rid of the massive gap that is appearing between the bottom two modules "Trusted By Businesses And Organisations Around The World" and "PrivacyEngine Reviews" on this page: https://www.privacyengine.io/en/

webdew · ‎Jun 17, 2021

Hi @ColmK1997 ,

Please Add this css in your css stylesheet:
section#reviews.pb500-l.pt850-l.section {
padding-top: 0.88889rem;
}
Hope this helps!

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

Thanks and Regards.

View solution in original post

Anton · ‎Jun 19, 2021

Hi @ColmK1997,

for people who don't have access to the hub(and please never let people who you don't know into the portal) it's quite "hard" to tell in which line the code is exactly since HubSpot minifies all the files to get the best possible performance.

What I see is:
The code is defined as inline-css. This means that it's either directly in the HTML+Hubl section of this module or somewhere in the/a JS file. Could you please post the whole HTML+Hubl source code of the module "Review_section" here as a code block? I'll take a look at it.

Thank you!

best,

Anton

ColmK1997 · ‎Jun 21, 2021

Hi @Anton , understood!

Here is the code within the HTML + Hubl section:

<section class="pb500-l pt850-l section" id="reviews"><div class="items-center justify-between-ns justify-start mw-83p-m row"><div class="col mw-66p-l mw-80p-m mw-none order-0-ns order-1 px350 w-100p"><h2 class="f400 fw-bold mt0-ns mt450"> PrivacyEngine Reviews </h2> <p class="f800-ns f900 fw-extrabold mt400"> What our customers say about us </p></div> <div class="col mw-8p-l mw350 order-0 order-1-ns px350 w-100p"><g fill="#b0b6b7" fill-rule="evenodd"><path d="m41.3084286.428c2.7142857 0 5.4285714 0 8.2857143.71428571l-8.2857143 15.71428569c-12.2857143-.7142857-23.2857143 8.8571429-24 21.2857143-.7142857 12.43 8.8571428 23.2857143 21.2857143 24h2.7142857c5.4285714 0 11-1.9985714 15-5.4285714l8.8571428 15c-6.8571428 4.8585714-15 7.5714286-24 7.5714286-21.8571428.7142857-40.4285714-15.7142858-41.14285711-37.7128572-.71428572-21.8585714 15.71428571-40.42999999 37.71428571-41.1442857z"></path><path d="m69.3078571 33.9994286 10.2857143 17.1428571-10.2857143 16.4285714-9.5714285-16.4285714h-19.8571429l10.2857143-17.1428571z"></path><path d="m52.8792857 27.8568571c0-2.7128571.7142857-5.4285714 2-7.5714285 1.4285714-2 4.1428572-4.1428572 6.1428572-5.4285715l1.4285714-.7142857c2.7142857-1.4285714 3.4285714-2 3.4285714-3.4285714 0-1.42857143-2-2.71285714-3.4285714-2.71285714-2.7142857 0-4.8571429 1.42857143-6.1428572 4.14142854l-3.4285714-3.42714283c.7142857-1.42857143 2-2.71571428 3.4285714-4.14428571 2-1.42857143 4.1428572-1.42857143 6.1428572-1.42857143s4.8571428.71428571 6.1428571 2.00142857c1.2857143 1.28428571 2.7142857 3.42714286 2.7142857 5.4271429 0 3.4285714-2 6.1428571-6.1428571 7.5714285l-2 1.4285715c-2 1.4285714-3.4285714 2.0014285-4.1428571 4.1442857h12.2857142v4.8557143c.1428572 0-18.4285714-.7142858-18.4285714-.7142858"></path></g></svg> </div></div> <div class="db flex-l mt600 row"><div class="col mw-33p-l mw-83p-m mx-auto-m px350 w-100p"><div><div class="Dingus--bottom b--neutral-200 ba br600 db pa500 relative shadow200"><h3 class="f600"> “Good user interface makes it easy to use and train other staff on this system.” </h3> <span class="c--yellow-600 dib mt400"><!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>
</head>
<body>


<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>

</body>
</html> </span><p class="mt400"> </div> <div class="flex items-start px450 py500"><p class="bg--aqua-700 br--round c--text-inverse f500 flex items-center justify-center square650"><span aria-hidden="">TH</span> </p><p class="f300 mt0 pl400 w-80p"><span class="db f400 fw-bold">Tim H</span> Information Compliance Officer</p></div></div>  
  </div> <div class="col mw-33p-l mw-83p-m mx-auto-m px350 w-100p"><div class="mt450-m"><div class="Dingus--bottom b--neutral-200 ba br600 db pa500 relative shadow200"><h3 class="f600"> “Easy to use and intuitive” </h3> <span class="c--yellow-600 dib mt400"> <!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>
</head>
<body>


<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>

</body>
</html> </span><p class="mt400">  </div> <div class="flex items-start px450 py500"><p class="bg--purple-700 br--round c--text-inverse f500 flex items-center justify-center square650"><span aria-hidden="">TE</span> </p><p class="f300 mt0 pl400 w-80p"><span class="db f400 fw-bold">Tim E</span> Data Protection Officer </p></div></div> 
<br>
  </div> <div class="col mw-33p-l mw-83p-m mx-auto-m px350 w-100p"><div class="mt450-m"><div class="Dingus--bottom b--neutral-200 ba br600 db pa500 relative shadow200"><h3 class="f600"> “Effecient process with excellent support and guidance from the Team. Thank you.” </h3> <span class="c--yellow-600 dib mt400"> <!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>
</head>
<body>


<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>

</body>
</html> </span><p class="mt400">  </div> <div class="flex items-start px450 py500"><p class="bg--purple-700 br--round c--text-inverse f500 flex items-center justify-center square650"><span aria-hidden="">MG</span> </p><p class="f300 mt0 pl400 w-80p"><span class="db f400 fw-bold">Marie G</span> Data Protection Officer </p></div></div>

ColmK1997 · ‎Jun 17, 2021

Hi @webdew thank you for resonding to my message. Can you please me where I can locate that code within the CSS. (i.e what number line it's on)

Thanks,

Colm.

webdew · ‎Jun 17, 2021

Hi @ColmK1997 ,

Please Add this css in your css stylesheet:
section#reviews.pb500-l.pt850-l.section {
padding-top: 0.88889rem;
}
Hope this helps!

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

Thanks and Regards.

natsumimori · ‎Jun 17, 2021

Thanks for your post @ColmK1997 .

@Kevin-C and @LucBenayoun , would you mind sharing your advice for @ColmK1997 ?

CMS Development