The iframe on my WordPress website is not displaying at its full size as intended

Is it possible to embed a link to a website in WordPress that is responsive to different devices, such as desktops and phones with varying screen sizes? On desktops, it looks fine, but on phones, it gets cut off and does not adjust accordingly.

Using padding-bottom doesn't seem like a good solution either, as it creates a lot of white space on desktops.

.iframe-edm {
overflow: hidden; 
position: relative;  
}

.iframe-edm iframe { 
border: 0 ;
height: 100% ;
left: 0 ;
position: absolute ;
top: 0 ;
width: 100% ;}

<div class="iframe-edm"><iframe src="https://abc/index.php/edm?src=mci" 
marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
javascripthtmlcsswordpressiframe

Answer №1

Have you experimented with adding the meta tag?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

UPDATE 1: Following your suggestion, I made some adjustments to your code and it is now functioning properly on my WordPress site. I specifically included width=100% in the iframe tag itself.

<div class="iframe-edm"><iframe src="https://abc/index.php/edm?src=mci" 
  marginwidth="0" marginheight="0" scrolling="no" width="100%">
  </iframe>
  </div>

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

I am experimenting with an express middleware that can either return next() or next("route")

After developing a middleware function that returns next() if a route's parameters are defined by queryItems, I came across a useful tool called node-mocks-http. However, it does not fake the next object. This led me to explore how this can be achieve ...

javascriptunit-testingexpressmocha.jsmiddleware

Struggling to implement a seamless scrolling effect using CSSTransition Group

In my quest to achieve a smooth vertical scroll effect for content appearing and disappearing from the DOM, I've turned to CSSTransitionGroup (or ReactTransitionGroup). While I'm familiar with CSS animations for such effects, I need to implement ...

javascripthtmlcssreact-transition-groupreactcsstransitiongroup

Transforming date format from fullCalendar dayClick event to HH:MM

I'm trying to find a way to select both start and end times when clicking on a timeslot in a day using FullCalendar. For example, if I click on the 9.00am - 9.30am slot, I want to capture both times. Here's the code snippet I have so far: $(&apo ...

javascriptphpfullcalendar

Advantages of placing script src tags at the top of the body versus placing them at the bottom of the body

I've heard that it's best to place the script tags right before the closing body tag. However, when I follow this advice, my angularJS expressions don't seem to compute correctly for some reason. When I place the script tags in that location ...

javascriptangularjs

What is the best way to ensure the image and card maintain the same size ratio in React Bootstrap?

One of the challenges I encountered involved a vertically aligned card group containing a card with an image: https://i.stack.imgur.com/w9Jkf.jpg This is the React code snippet that was causing the issue: import React from 'react'; import { ...

cssreactjsbootstrap-4

Using JavaScript to display a selection of objects from an array: showcasing x out of x items

What is the most efficient method for sorting or querying an array of objects using JavaScript? For example, how can I retrieve only the first two objects, followed by the next two, or obtain 5 objects starting from the 5th position? Which specific functi ...

javascriptjqueryarrayssorting

Puppeteer cluster crashes unexpectedly upon invoking cluster.close() following cluster.queue() execution

So here's the deal - I developed an app for web scraping that requires the ability to run multiple processes simultaneously (more than one Chromium instance). To achieve this, I implemented puppeteer-cluster. While I successfully managed to initiate s ...

javascriptnode.jsasync-awaitpuppeteerpuppeteer-cluster

Contrasting flexbox overflow handling in React versus React Native

As a beginner in React Native, I have a query about achieving a flex layout with two child containers. The goal is to ensure that if one child's content overflows, the other child shrinks accordingly. In standard HTML/CSS, I was able to achieve this: ...

htmlcssreactjsreact-nativeflexbox

What type of programming language is utilized in creating this online interactive calculator?

I have a strong interest in creating an interactive calculator like the one found on keto-calculator, but I am unsure of where to begin my research on how to develop it. Can you provide insights on the coding language typically used for such calcula ...

html

Transforming jquery code into angularjsAre you looking to migrate your

I am currently struggling with converting a jQuery function into an AngularJS function. Here is the specific code snippet: $('p').each(function() { $(this).html($(this).text().split(/([\.\?!])(?= )/).map( function(v){return '< ...

javascriptjqueryangularjs

Using JavaScript to Access PHP Files

Would like to understand the process of calling a php file (test.php) from either "x:" or "y:" in the code below. var example1 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'Most read', ...

javascriptphpvariables

Utilize Selenium in Python to choose an element

When working with the following HTML code: <div class="nav-category__col" id="category_nav_level_3" style="display: block;"> <input type="hidden" value="1" name="videogame_type" id="videogame_type"> <ul class="nav-category__list" adp ...

pythonhtmlselenium

Tips for aligning a text box field in the center using Bootstrap

I'm having trouble centering a text field on my screen. No matter what I try, it stays aligned to the left. How can I fix this and get it centered? <div class="form-row"> <div class="col-md-4 col-md-offset-4"> ...

htmlcssbootstrap-4

Tips for enabling animation for AmCharts animateData feature

To achieve a real-time values per minute chart, the last bar value is to be incremented every minute after its addition. Additionally, a new bar with a value of 1 will be added each minute while removing the oldest bar. All these changes need to be animat ...

javascriptamcharts

I need assistance with displaying this array either using CSS styling or in table format. Can someone please

Seeking assistance to display this data in table format using tables, css, or bootstrap. Can anyone help? Utilized PHP Code: $url = "http://some-website.com/api/message"; $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $content = cur ...

phphtmlcssarrayshtml-table

Highcharts 3D Pie Chart with Drilldown Feature

How can I create a 3D Pie Chart with Drilldown effect? I am having trouble understanding how it works. Here is a JsFiddle Demo for a 3D Pie Chart: JsFiddle Demo And here is a JsFiddle Demo for a 2D Pie Chart with Drilldown feature: JsFiddle Demo You can ...

javascriptjquerycsschartshighcharts

Utilizing ES6 Proxy leads to the occurrence of an error message stating "this is not a function" whenever a function call

As I ventured into the depths of ES6 Proxies, attempting to be a crafty developer, I found myself entangled in their complexities. My goal was to intercept any get or set operation on a property from a class I had written and ensure that they were stored e ...

javascriptnode.jsecmascript-6es6-proxy

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

I have a list of countries displayed as an unordered list inside a table column. I would like to implement keyboard search functionality for quicker navigation within the list. <ul class="country-search"> <li id="1">Country 1</li> ...

jqueryhtmljquery-uicss

The contents of the div do not display when the button is pressed except in jsfiddle

I have written a script that triggers the appearance of a div where users can adjust the time settings for a timer. The functionality works perfectly on JSFiddle, with the div displaying as intended. However, when tested on other online IDEs such as Coding ...

javascripthtmlcssjsfiddle

The CSS JSON code I have written is not having any impact on the appearance of my div

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles/common.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type='text/javascript'> ...

cssjsonjsonp