Ads

ColmK1997
Participant

Landing page image/ section problems

SOLVE

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? 
1 Accepted solution
himanshurauthan
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Landing page image/ section problems

SOLVE

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

Digital Marketing & Inbound Expert In Growth Hacking Technology

View solution in original post

6 Replies 6
himanshurauthan
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Landing page image/ section problems

SOLVE

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

Digital Marketing & Inbound Expert In Growth Hacking Technology
ColmK1997
Participant

Landing page image/ section problems

SOLVE

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?

0 Upvotes
ConnorSlivensky
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Landing page image/ section problems

SOLVE

Webinar Archive 4_20_2021.PNG

 

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.

ColmK1997
Participant

Landing page image/ section problems

SOLVE

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. 

0 Upvotes
ConnorSlivensky
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Landing page image/ section problems

SOLVE

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.

ConnorSlivensky
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Landing page image/ section problems

SOLVE

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.