Hi @Chelsy Koshy 

The CSS styles for HTML learning objects need to be placed in the separate CSS styles field in the Branding Look & Feel section of the settings. See the route to finding it in the screenshots below. 

Hope this helps!

Alan

@Alan - Thanks for your reply. Yes, that's where I added styles too. But the problem is not with the style. The hyperlink I added to the parent div to make the card clickable is applied to each div in the parent div automatically in the HTM widget.

unfortunately the way Docebo works with HTML code is limited and it does not accept all HTML code (as you probably guessed). If you go basic and sometimes use older versions HTML code, you can get it working...a lot of trial and error.

This should work, but you need to split the style part, from the structure part and put the style in the central spot as mentioned above. so this part:

.tcolumn {
  float: left;
  width: 18.68%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .tcolumn {
    width: 100%;
    display: block;
  }
}

.tcard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border: 2px solid #1e5b67;
}

.tcontainer {
  padding: 0 16px;
  text-align: center;
    background: #ffffff;
    margin-top: -25px;
}

.tcontainer::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

goes in the central area (admin settings > configure look and branding > custom styles). This part:
 

<div class="row">
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcolumn">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148"/>
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 1</p>
</div>
</div>
</div>
</div>
</a>
<a style="display: inline-block;" href="https://picsum.photos/images">
<div class="tcolumn">
<div class="tcard">
<img src="https://picsum.photos/id/1/222/148"/>
<div class="tcontainer">
<div style="padding-top:30px;height:175px;font-family:Arial;">
<p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Content 2</p>
</div>
</div>
</div>
</div>
</a>
</div>

goes into the wdiget/page. One thing to be careful of is your class names (especially row) are very generic. You might want to specialize them so that they don’t interfere now or in the future with other platform areas.

@Bfarkas  Thanks for your reply. As I said above, that's exactly what I did. Styles in the custom styles section of the Configure and Branding settings and code in the Widgets area. In my code, I only put the hyperlink to the parent div element. But the problem is that after this code is saved in the HTML widget, it itself changes the code as below. As you can see in the code below, hyperlinks are duplicated and applied to each HTML element. Because of that, I can't make the card clickable.

<div class="row">
<a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcolumn"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcard"><a style="display:inline-block;" href="https://picsum.photos/images">
<img src="https://picsum.photos/id/1/222/148" alt="148" /></a><div class="tcontainer"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div style="padding-top:30px;height:175px;font-family:Arial;"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 1</a></p><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a>
<a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcolumn"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div class="tcard"><a style="display:inline-block;" href="https://picsum.photos/images">
<img src="https://picsum.photos/id/1/222/148" alt="148" /></a><div class="tcontainer"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><div style="padding-top:30px;height:175px;font-family:Arial;"><a style="display:inline-block;" href="https://picsum.photos/images">
</a><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;"><a style="display:inline-block;" href="https://picsum.photos/images">Content 2</a></p><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a></div><a style="display:inline-block;" href="https://picsum.photos/images">
</a>
</div>

So, you might want to clean up you code a bit to avoid some potential issues, there are a few extra elements adding style that can just be collapsed (fewer elements the better). Also, divs contained in themselves tends to go bad in Docebo, but you can often get away with things like 1 top level div and then use spans instead elsewhere. 

You also still might just need to basically wrap parts of the individual on purpose with the same link, pretty common in wysiwyg editors unfortunately. Often will build a excel sheet to build these kinds of things to keep it simple as a result.

@Bfarkas Thank you! I cleaned up the code and it worked.