Responsive iFrame in a two column text

Using Ghost
1

Hi all,

I just started using Ghost Pro and I took some inspirations from other posts in this forum and in other ones. I’m not quite used to HTML but I’m trying to learn tips and tricks to adjust text layouts for the Casper theme.

I found this code to create a double column text that I can add in the code injection of the post

  .double-column-global {
    columns: 2;
    column-gap: 20px;
    font-size:20px; 
    font-family:"Times LT Std Roman"; 
    text-align:justify;
  }

i use this as a class for a and then add the text inside. The next step was to add an image in one of the columns. To do so I use this code:

<figure style="float: right; margin-left: 5px; margin-right: 0; max-width: 100%; max-height: 70%; width:750px; height:800px;">

<iframe style="position:relative; border:0; top:0; left:0; right:0; bottom:0; width:100%; height:100%; " 
  id='embed-frame-13'
    src="URL to the image">
</iframe>
</figure>

It works quite good on the web preview (the image is added to the right column) but it is not responsive to the mobile format.

In the same post I use CSS to create iFrame container and the a responsive iFrame, but if I use those class in the two column section, the image automatically resize to the mobile format even in the web preview.

Those are my CSS:

.format_iframe_container_center {
     display:flex;
     flex-direction:row;
     justify-content:center;
     position:relative;
     overflow:hidden;
     padding-top:56.25%;
     width:100%;
   }

.format_iframe_responsive {
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      right:0;
      width:100%;
      height:100%;
   }

Anyone has an idea to share please?

Thank you all!

2

I think you’re complicating this by using the iframe. Is there a reason it’s necessary?

3

Hi,

well no. But its one of the solutions that I have found and works for the other images in the post that are not in a double column text.

4

I see that you’ve got a hard-coded width on your figure in the code you shared. That’s probably a source of non-responsiveness. I’m guessing that on mobile you’d also want to reduce the columns to 1, which you’d do by using a media query.

1 Like
5

For the mobile version I put all in one column thanks to this


  @media screen and (max-width: 900px) {
    .double-column-global {
      columns: 1;
    }
  }

Yes I used fixes sizes to try to get the full picture and not a cropped version of it.

It would be nice if in the future Ghost could have some sort of custom text card with different text layouts. In NEOS for example, when editing a post, it is possible to insert text “blox” with different layouts for text and images without getting trough CSS.

1 Like