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

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

Home Forums Support iFrame size (height) for a short code

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1638434
    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

    #1638496
    David
    Staff
    Customer Support

    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;
    }
    #1638540
    Jeroen

    Thank you David… Quick and easy as always!

    #1639234
    David
    Staff
    Customer Support
    #1640585
    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?

    #1640729
    Leo
    Staff
    Customer Support

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

    @media (min-width: 769px) {
        .ctl-arcade-game-iframe {
            min-height: 500px;
        }
    }
    #1640937
    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?

    #1640949
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1640997
    Jeroen

    You are true heroes… Sorry again for being a huge amateur πŸ™‚

    #1641017
    Elvin
    Staff
    Customer Support

    No problem. glad to be of any help. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.