Landing page image/ section problems

Marketing & Content Hub Ads
1

Hi all,

I have drafted together this landing page: https://www.privacyengine.io/data-protection-academy-0?hs_preview=tbVXwzri-43579617954

I am having a few issues that I am trying to figure out;

  • Upcoming Webinar Calendar; my browser isn’t showing the last 2 images that should be appearing. Is this something to with the image address perhaps?
  • Data Privacy Certification; the two sections “IAPP Training & Certification” and “GDPR Primer For Data Protection Officers (DPO)”, you can see the boxes aren’t the same size. Is there a way to make them the same size just like the “Premium PrivacyEngine in-platform Training” and “Micro-Learning Video Content with NINJIO” are? I do realise the spacing is different because of the bullet points on the IAPP but if there’s a way to keep them the size with a space underneath that’d be great.
  • Down at the “Webinar Archive” you can see the images aren’t centered and in fact are cut off slightly to left. Is there a way for them to be centered?
2

Before messing with the spacing I’d get your images sorted out as they can mess up your spacing if you do them second. Your image sources are broken as well as the icons you’re using as bullets in your left box. As far as the spacing goes you should be able to add bottom padding to the right box which would extend the background color down. Might take some guess n check with the measurements but I believe that should accomplish your goal.

3

Hi,

Thank you for the response. I have managed to fix the images no appearing and the space difference between the boxes.

I am however still unsure how I can stop the images down in the webinar archive from cutting off to the left, is there a way to center these?

4

41212i691BC253747DEA78.PNG
41212i691BC253747DEA78.PNG998×427 121 KB

As you can see from the screenshot above I’m not seeing the cut-off images you’re describing. One thing to check, it may sound silly, make sure your windows are in full-screen mode. But yes there should be a way to center those (what I assume are) modules.

My first guess would be to look in the design manager where it lets you add HTML and often has options for things like alignment. If it is a custom module then it’s a little trickier and your best is probably to reach out to the developer directly. If you got the module off the Asset Marketplace the listing should have their contact info.

5

Hi,

As you can see to the left of the images in the screenshot the red border is cut off slightly. (The red border to the left looks thin compared to the right) This shouldn’t be the case. They are indeed custom modules.

6

Does the blue line underneath the thin red ones look thin to you? I’m trying to determine if it’s specific to those tiles it could be the images themselves if the other tiles in the col. look correct. If not I’d reach out to the designer who made the module as we’re just guessing on how it’s built/organized on the backend.

7

Hi @ColmK1997,

Here are some solutions and recommendations to your issues:

  • For the first issue I’m not clear what exactly is the problem because I am able to see three images perfectly and there is a structure for three images as well, so what’s the problem there?
  • For the second issue, just give the div wrapping the left and right div the CSS display: flex; and on the right div there is a CSS of border-bottom: 67px solid WhiteSmoke; which needs to be removed and the required thing should be achieved. Doing this both the divs become of equal height.
  • For the third query please set this CSS for the .content-image as margin: 0 auto;. Also give the anchor wrapping the image as display: block;

Regards,

Himanshu Rauthan

8

Hey, I also need your help. I have created a custom landing page, all my files are correct, but it is still showing me the raw JSON on it. Prior it was showing me the page, but didn’t show the photos uploaded on it.

Mr_Harry_0-1762347543663.png
Mr_Harry_0-1762347543663.png1920×1080 339 KB

It, is showing this and these are my codes below;

Landing-page.html

<!--

templateType: page

isAvailableForNewContent: true

label: “HubSpot Practice Landing Page”

-->

<!DOCTYPE html>

<html lang=“en”>

<head>

\<meta charset="UTF-8" />

\<meta name="viewport" content="width=device-width, initial-scale=1" />

\<title>HubSpot Landing Page\</title>

{{ standard\_header\_includes }}

\<link rel="stylesheet" href="{{ get_asset_url('../css/style.css') }}">

</head>

<body>

{% dnd\_area "landing\_page\_area" label="Landing Page Area" %}

  {% dnd\_section %}

    {% dnd\_module path="../modules/hero-section.module", label="Hero Section" %}

    {% end\_dnd\_module %}

  {% end\_dnd\_section %}

{% end\_dnd\_area %}

{{ standard\_footer\_includes }}

</body>

</html>
Module.html

<div class=“hs-hero”>

<header class=“hs-hero__header”>

\<div class="container">

  \<a class="logo" href="/">

    \<img src="{{ module.logo_src }}" alt="{{ module.logo_alt }}" />

  \</a>

  \<nav class="nav">

    \<a href="#features">Features\</a>

    \<a href="#pricing">Pricing\</a>

    \<a href="#contact" class="btn-secondary">Contact\</a>

  \</nav>

\</div>

</header>

<div class=“container hs-hero__content”>

\<div class="hs-hero__left">

  \<h1>{{ module.heading }}\</h1>

  \<p class="lede">{{ module.subheading }}\</p>

  \<div class="hero-cta">

    {% if module.show\_form %}

      \<!\-\- A simple form placeholder; replace with HubSpot form embed or a module form later \-\->

      \<form class="lead-form" action="#" onsubmit="event.preventDefault(); alert('Form submitted (local demo)');">

        \<input name="email" type="email" placeholder="{{ module.cta_placeholder }}" required />

        \<button class="btn-primary">{{ module.cta\_text }}\</button>

      \</form>

    {% else %}

      \<a class="btn-primary" href="{{ module.cta_link }}">{{ module.cta\_text }}\</a>

    {% endif %}

  \</div>

\</div>

\<div class="hs-hero__right">

  \<img src="{{ module.hero_image }}" alt="Hero image" />

\</div>

</div>

</div>
Theme.JSON

{

“label”: “HubSpot Landing Pro”,

“preview_path”: “templates/landing-page.html”,

“screenshot_path”: “images/screenshot.png”,

“author”: {

"name": "Haider",

"email": "your-email@example.com",

"website": "https://yourwebsite.com"

},

“license”: “MIT”,

“documentation_url”: “https://developers.hubspot.com/docs/cms”,

“version”: “1.0.0”

}

9

Hi @ColmK1997,
Thank you for posting to the Community!
I’d like to tag in Himanshu and Connor since they were able to provide the Accepted Solutions of this thread.
Hi @himanshurauthan and @ConnorSlivensky Do either of you have any ideas for @ColmK1997?
Thank you!
Cassie, Community Manager