- This topic has 9 replies, 4 voices, and was last updated 1 year, 6 months ago by
Elvin.
-
AuthorPosts
-
January 29, 2021 at 7:38 am #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.
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
January 29, 2021 at 8:34 am #1638496David
StaffCustomer SupportHi 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 29, 2021 at 9:05 am #1638540Jeroen
Thank you David… Quick and easy as always!
January 30, 2021 at 4:42 am #1639234David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 31, 2021 at 8:14 am #1640585Jeroen
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 #1640729Leo
StaffCustomer SupportYou can use desktop only media query to exclude that code from mobile:
@media (min-width: 769px) { .ctl-arcade-game-iframe { min-height: 500px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 31, 2021 at 3:58 pm #1640937Jeroen
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 #1640949Elvin
StaffCustomer SupportHi,
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?"January 31, 2021 at 5:54 pm #1640997Jeroen
You are true heroes… Sorry again for being a huge amateur π
January 31, 2021 at 6:46 pm #1641017Elvin
StaffCustomer SupportNo problem. glad to be of any help. π
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.