[Resolved] iFrame size (height) for a short code

[Jeroen]

Hi Guys,

I am just guessing this one is easy for you and this noob has been F@$%$#ng around for 2 days again. But at least I try first, right? 😉

So, I have an arcade game plugin. Fun stuff. To place a game there is a shortcode. In the shortcode, there is a height setting. That part is not working. So as usual I have created a workaround. But that isn’t sufficient. It only works in some cases. With more games on the way, I hope you have a clean and easy solution.

So this is the page

This is the shortcode [ctl_arcade_game game=”ctl-freecell-solitaire” mode=”iframe” height=”1000 px” ]

Here is the other page with workaround

<div class="resp-container"><iframe class="resp-iframe" src="https://patiencespelen.be/speel-spider" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>

This works on the Spider page, not in the Freecell.. And even if it did, it messy.. What do you guys suggest?

J

[David]

Hi there,

the iframe is being output with an inline style.
You can try forcing it with your own CSS using the class on the iframe ie. ctl-arcade-game-iframe :

.ctl-arcade-game-iframe {
  min-height: 500px;
}

[Jeroen]

Thank you David… Quick and easy as always!

[David]

You’re welcome

[Jeroen]

David, What to add to the CSS to exclude the min-height for mobile devices?

And also, do you have any idea why it is not really working on patience.nl?

[Leo]

You can use desktop only media query to exclude that code from mobile:

@media (min-width: 769px) {
    .ctl-arcade-game-iframe {
        min-height: 500px;
    }
}

[Jeroen]

Like a charm! Thank you.. Just 1 final issue.. On mobile the game should just have a little more hight. Can I CSS this separatly?

[Elvin]

Hi,

Like a charm! Thank you.. Just 1 final issue.. On mobile the game should just have a little more hight. Can I CSS this separatly?

You can do it with this @media rule:

Example: 750px on mobile.

@media (max-width: 768px) {
    .ctl-arcade-game-iframe {
        min-height: 750px;
    }
}

[Jeroen]

You are true heroes… Sorry again for being a huge amateur 🙂

[Elvin]

No problem. glad to be of any help. 😀

[Author]

Posts