Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. 

<iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf"  width="600"  height="400" frameborder="0" marginwidth="0" scrolling="no"></iframe>

Is there a way to adjust the size of the iframe using CSS and PHP like below:

.showgame {
    width: 640px;
    height: 480px;
    margin:0;
    padding:0;
    position: absolute;
    left: 0px;
    top: 40px;
}

<div class="showgame">
<?php echo $row_GameData['strGame']; ?> 
</div>
csshtml

Answer №1

Make a simple adjustment to your css selector:

.showgame

Change it to:

.showgame iframe

This will allow you to directly target the iframe for resizing purposes.

If you prefer to maintain all styling within the wrapper div, you can add the following code instead: 

.showgame iframe {
    width: 100%;
    height: 100%;

    border: 0;
    /*OR*/
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The list-image is nowhere to be found

Seeking assistance with my LI style CSS. Visit this link for reference I'm having trouble getting an image to float on the right side of my sidebar links, and my content is overlapping with the sidebar... .sidebar-menu ul { font : 14px font-fam ...

htmlcssxhtml

Have you ever wondered how the automatic video play on scroll feature works on Tiktok.com and YouTube shorts when using a mobile device?

My goal with React JS is to develop a website similar to Tiktok, where the video below will automatically play with sound as the user scrolls down. I attempted to set this up using window.addEventListener("scroll",...), but after looking into it further, ...

javascripthtmlcssreactjs

Clicking on two links simultaneously to avoid them being blocked as pop-ups

Is there a way to open 2 URLs at the same time with just a click? I'm open to using jquery, javascript or any other method. Priority is on efficiency and speed, but I am open to all options. I attempted using onclick in the anchor tag and also tried ...

javascriptphpjqueryhtmlhref

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

htmlcsshtml-table

What is the technique to enable this div to be clickable?

I am trying to make each "card" of a WordPress plugin clickable on my website. I have inserted a Pure JS element with the following code: document.getElementsByClassName('fc_card-container').onclick = function() {alert('It works!');} ...

javascriptcss

Matching start and end of CSS selectors using regex

If I have elements with a title attribute like the examples below, how can I select the div with the title custom-marker-wqs-tailrace bbu-l2 using a CSS regex selector? <div title="custom-marker-awlr-tailrace bbu-l2"></div> <div ti ...

htmlcss

Problems with the bottom section

Is there a way to make the middle section extend downwards when the window is resized, keeping the footer at the bottom without overlapping with the content? If anyone has suggestions on how to achieve this, please share! I'm hoping there's a b ...

csspositionfooterextendfixed

Error message displayed on PHP web page

I'm working on a page that will display "no query string" if $_REQUEST is null, and if not, it will show a page with the content saying "query string". Additionally, it should output the line "The query string is: var_dump($_REQUEST)". I've writt ...

phphtmlweb-services

when a div contains another div and is then followed by another div, apply the following style

Is there a way to create a rule that functions like the following: .container .unit:first-child(if it contains div.box1.extra) + .box2 { top: 50px;} <div class="container"> <div class="unit"> <div class="box1 extra"><!-- co ...

htmlcss

Is there a way to programmatically simulate clicking on the "Cancel search" button?

I have a text input field with type "search". In order to perform UI testing, I need to simulate clicking on the "cancel search" button: The code for this specific input field is as follows: <input type="search" value="user"> Although the cancel b ...

javascripthtmlselenium

How can I restrict input to only numbers and one decimal point using JavaScript?

The following code I have is not functioning as expected: function validateInputValue(element) { var regex = /\D$/i; // Important: avoid white spaces in password if(regex.test(element.value)) { alert("Please check your input format"); e ...

javascriptphpjqueryhtml

Support for nesting span elements in HTMLDocument

Struggling to incorporate this specific text into my HTMLDocument: <html><span class='stuff' id='X'><span id='Y'>content</span></span></html> Utilizing the following code for insertion: S ...

javahtmldom

Modifying text appearance and design in material-ui release 0.15.4

I'm quite new to CSS and front-end web development, and I'm struggling with setting the style of a button on my page. I want to change the text color and possibly adjust the primary color of my theme from cyan to blue. I know that material-ui has ...

cssmaterial-ui

Guide to personalizing checkbox design using react-bootstrap

I am working with react-bootstrap and attempting to style a custom checkbox, as it appears possible but is not working. I have followed the documentation provided here. Here is the code snippet: import * as React from "react"; import { t as typy } from & ...

cssreactjsreact-bootstrap

Select a random class from an array of classes in JavaScript

I have a collection of Classes: possibleEnemies: [ Slime, (currently only one available) ], I am trying to randomly pick one of them and assign it to a variable like this (all classes are derived from the Enemy class): this.enemy = new this.possibleEn ...

javascripthtmltypescriptvue.jsclass

Prevent a specific image from being impacted by CSS styling

I've implemented the following CSS on my website for image opacity: img { opacity:0.4; filter:alpha(opacity=40); } img:hover { opacity:1; filter:alpha(opacity=100); } Now, I am looking to exclude certain images from being affected by this ...

cssstyles

"Using Vue 3 to teleport content to a specific element and swap out existing

I've successfully implemented the use of Vue 3 teleport to display elements within a div. Although teleport adds items to the specified element, it doesn't replace existing elements in the div. Is there a way to configure teleport to replace th ...

javascripthtmlvue.js

Having trouble selecting content in an HTML document using Xpath and response.css with Scrapy?

Something is quite puzzling me and I've been pondering over it for almost a week now. Perhaps the solution is staring right at me and I just can't see it clearly... Any hints for alternative approaches would be greatly appreciated. I have n ...

pythonhtmlcssxpathscrapy

Tips for creating dynamic row styles in a fluid table layout?

Could someone help me figure this out? I'm not familiar with JavaScript and need assistance as I've never created it, only edited existing scripts. I have a layout with two tables side-by-side. On mobile devices, the second table is pushed below ...

javascripthtmlcssresponsive-design

Personalized Tumblr-style button

Hey there, I've been working on creating a custom Tumblr-like button and tried adding an iframe above it to make it clickable. However, something seems to be off as it's not functioning properly. I'm still trying to wrap my head around how i ...

javascriptcssiframetumblr