Archived topic

iFrame size (height) for a short code

9 replies · Started by Jeroen on January 29, 2021

Viewing posts 1–10 of 10

January 29, 2021 at 7:38 am #1638434

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?

January 29, 2021 at 8:34 am #1638496

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;
}

January 29, 2021 at 9:05 am #1638540

Thank you David... Quick and easy as always!

January 30, 2021 at 4:42 am #1639234

You're welcome

January 31, 2021 at 8:14 am #1640585

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?

January 31, 2021 at 11:14 am #1640729

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

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

January 31, 2021 at 3:58 pm #1640937

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?

January 31, 2021 at 4:17 pm #1640949

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;
    }
}

January 31, 2021 at 5:54 pm #1640997

You are true heroes... Sorry again for being a huge amateur :)

January 31, 2021 at 6:46 pm #1641017

No problem. glad to be of any help. :D

This archived topic is closed to new replies.

Start building better websites today.