Ghost is a popular blogging platform that offers a simple, clean interface for bloggers to share their thoughts, ideas, and experiences. One of the many features that make Ghost a favorite among bloggers is its ability to support HTML embeds. This feature allows you to integrate multimedia content, such as videos, images, and interactive elements, into your blog posts. However, adding a full-width HTML embed can be a bit tricky if you're not familiar with the process. In this blog post, we'll guide you through the steps to add a full-width HTML embed on your Ghost blog post.

Step 1: Inject the style code on ghost panel:

<style>
@media (min-width:768px) and (max-width:1023px) {
   .kg-image-card.kg-width-wide.embed div {
      width: 110%;
      margin-left: -5%;
   }
}
@media (min-width:1024px) and (max-width:1299px) {
   .kg-image-card.kg-width-wide.embed div {
      width: calc(1000px - 85px - 85px);
      margin-left: calc((700px - 1000px) / 2 + 85px);
   }
}
@media (min-width:1300px) {
   .kg-image-card.kg-width-wide.embed div {
      width: calc(1200px - 85px - 85px);
      margin-left: calc((700px - 1200px) / 2 + 85px);
   }
   .kg-image-card.kg-width-wide.embed iframe {
      height: 600px !important;
   }
}
</style>

Add HTML Code with The Class

<figure class="kg-card kg-image-card kg-width-wide embed">
  
Your MAPOTIC embed code

</figure>

Thats all! You can see embeded section is wider. You can configure to do full width also.

If your embedded content still doesn't span the full width of the post or if it doesn't look right, you may need to customize the CSS. You can do this by adding a style tag in the HTML card and writing custom CSS rules. For instance, you can set the max-width property to 100% to ensure that the embedded content never exceeds the width of the blog post.


Adding a full-width HTML embed to your Ghost blog post can greatly enhance your content and make it more engaging for your readers. While it may seem a bit technical, with a bit of practice, you'll be able to easily add full-width HTML embeds to your posts. Remember, the key is to ensure that your embed code is responsive and adjusts to the width of the screen. Happy blogging!

Share this post