The client wants to add a game that he created with AI. I tried to embed it, but breaks the entire page layout. I also tried confining the code to a pop-up window, but the problem persist. Any ideas on what could be wrong?
Not much detail to go on here.
But I’m going to make a guess that you’re referring to the arrangement of elements directly inside the <body>?
If so it’s likely because you’re changing the display to flex in your style tag here- this will only be visible in the published site.
I see. I din’t know the styling of teh embed code would affect the entire page.
I deleted teh styles from the code. Still, I cannot adjust the size of the game by styling the div that contain the game. Is there a way around it? Is there a way to add styling to the game without affecting the entire page?
I’m sorry, but my HTML CSS knowledge is very limited.
Thnaks for all the help :)
At a glance I mostly saw the <canvas> that the game is drawn on, this does not need styling. I’m not sure what the flex was for or why it was on the body. If part of the game like control buttons needs to be flexxed, target that specifically.
If it was something to do with your popup approach, target that DIV specifically. Don’t flex the body or as you can see, the body gets flexxed.
At the center of any project is figuring out exactly what the end goal is and what resources you are working with, and I don’t know either. Therefore it’s hard to advise anything. If the game is hosted on a separate server, perhaps using an <iframe> is an option.