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

Changes to attributes of an HTML tag cannot be made by jQuery code during an AJAX call

Could someone help me figure out why this jQuery code is not functioning properly? I have already tested it outside the $(document).ready block with no success. Note: The unusual "{{ }}" and "{% %}" syntax is typically used in Django. jQuery $(document) ...

javascriptjqueryhtmldjango

Using an image as an onclick trigger for a JavaScript function

I am working on a registration page as part of my university project where users can create an account and store their information in a MySQL database. One feature I'm implementing is the ability for users to select an avatar picture. Below is the co ...

javascripthtmlimageonclickavatar

Radio buttons are not having the :invalid pseudo class properly applied

Looking to style a radio group with a required attribute. Attempting to adjust the appearance of the radio group depending on whether an input is selected or not. However, it appears that the :invalid pseudo-class does not apply to radio buttons. ...

csshtmlradio-button

What is the best way to change a date from the format DD/MM/YYYY to YYYY-MM-DD

Is there a way to use regular expressions (regex) to convert a date string from DD/MM/YYYY format to YYYY-MM-DD format? ...

javascripthtmljsonregex

Is there a way to include a tag as an argument in a scss mixin?

Currently, I am working on a mixin that will target a specific child element within a parent. For instance, my goal is to target all <a> tags within a parent element that also has a parent of section---blue. I initially thought that passing the tag ...

csssassscss-mixins

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

javascriptjqueryhtmlcss

What is the best way to apply a semi-transparent background to my navigation bar, while maintaining a blue background across my entire page?

Currently, I have a background set for my website along with a navigation bar that displays my name and additional information. I am looking to make the background of this navigation bar semi-transparent so that it is possible to see through it. I tried ...

htmlcss

Tips for Enhancing the Appearance of a List Input Box

While on my hunt for an auto-completing text field, I stumbled across lists. <label>Bad Habit <input list="badhabits" id="habits" name="habit"/> </label> <datalist id="badhabits"> <option value="alcoholics"> <option ...

htmlcssinputdrop-down-menutextbox

"Utilizing social links in web design for a seamless user experience

I'm currently exploring ways to repair the design of social media links. The GitHub and Spotify icons are displaying at different sizes, and it seems like the Blogger icon is not aligning correctly: Referring to How To Create Social Media Buttons - ...

htmlcssicons

Bootstrap CDN causing modals to fail to appear

Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...

htmlcssbootstrap-modal

Using jQuery to append a new item to a JSON file

I have a straightforward JSON file containing a few pieces of data. Here is an example: { "id": 1, "name": "Porsche", "type": "911", "price": "135000" } My task is to create an HTML form with inputs for name, type, and price. When the user s ...

jqueryhtmljsonforms

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

javascriptjqueryhtmlcssjson

Pictures failing to load on both Chrome and Safari browsers

For some reason, the images on my app are not appearing in Chrome and Safari but show up fine in Firefox. If you try to open the image URL in a browser, it works perfectly. However, when embedded in the HTML document, the image appears broken. I also test ...

jqueryhtmlfirefoxgoogle-chromejquery-templates

Accordions housing Bootstrap 3 pills in a sleek design

I'm working on integrating pills and an accordion in Bootstrap 3. Everything seems to be functioning correctly, but there are a couple of issues I am encountering: When the accordion is open, clicking on another tab closes the accordion. I would li ...

javascriptjquerycsstwitter-bootstrap-3

Semantic HTML and unambiguous: both

We are making an effort to enhance the semantics of our HTML, and one element that stands out in our code related to presentation is <div class="clear"></div> For instance, if we consider the following semantic HTML structure: <div class= ...

htmlcsssemanticssemantic-markup

Tips for scrolling ion-items vertically to the bottom and top using arrow icons in Ionic 4

I'm developing an Ionic 4 app with Angular and looking to incorporate Up and Down Arrow buttons for vertical scrolling from top to bottom and vice versa. ...

htmltypescriptionic4

Using Ajax to implement a content slider with lightSlider

Seeking assistance in developing a dynamic content slider utilizing the LightSlider plugin. Currently, I have a script that fetches content from a database table (outputting JSON to HTML) and displays 6 div's of content per slide. However, I aim to di ...

javascriptjqueryhtmlajax

Retrieving text content within a span element using CSS

Here is the Jsfiddle that I experimented with http://jsfiddle.net/LpH8B/2/ <span>*</span> <br> <span>*</span> <br> <span>hdhdf</span> span[text='*'] { color:red; } I am looking to target ...

csshtml

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

Encountering a problem with AJAX displaying error code 80020101 while attempting to retrieve a string from a

I encountered an error while running my code: Microsoft JScript runtime error: Could not complete the operation due to error 80020101. I came across this thread on Stackoverflow that talks about a similar issue: Ajax request problem: error 80020101 var d ...

jqueryasp.nethtmlajax