Responsive Design of Iframe Not Adjusting Properly

My website features an embedded Google map in an iframe:

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=EXAMPLE" style="top:0px; position:fixed; float:left; width:35%; height:400px;"></iframe>

Adjacent to the map, I have a table displaying data:

<table id="myTable" class="tablesorter tablesorter-default tablesorter7af52c677e1d6" width="500" border="1" style="display:block; float:left; width: 65%;" role="grid">
</table>

When the viewport size is above 1050px, the layout looks great. The table occupies 65% of the screen with the map at 35% on the upper right corner. However, when the viewport shrinks below 1050px, the iframe starts covering more of the table as it fails to scale properly. Additionally, the content within the iframe doesn't adjust in size, possibly due to Google's responsive design constraints.

Here is how it appears at +1050px (desired view):

https://i.sstatic.net/hIfFL.png

And here is how it looks at 500px (map overlapping table):

https://i.sstatic.net/QiUyV.png

The map now only displays 50% of the original content (between interstate 91 and Augusta), with the share option and info block removed (likely due to Google's responsive design).

If further details are required, please let me know. Below is the minimal HTML structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <table id="myTable" class="tablesorter tablesorter-default tablesorter7af52c677e1d6" width="500" border="1" style="display:block; float:left; width: 65%;" role="grid">
        </table>
        <iframe src="https://www.google.com/maps/d/u/0/embed?mid=EXAMPLE" style="top:0px; position:fixed; float:left; width:35%; height:400px;"></iframe>
    </body>
</html>

Visual representation of styles:
Table display:
https://i.sstatic.net/ud44B.png

Map display:
https://i.sstatic.net/yd3FN.png

htmlcssresponsive-design

Answer №1

To achieve the 65-35 layout on all screens, it is recommended to wrap the table in a div and remove the fixed position from the iframe.

In smaller screens, consider switching to a column layout for better data viewing.

table {
  border-collapse: collapse;
  overflow: scroll;
}

table, tr, th, td {
  border: 1px solid #121212;
}

iframe {
  width: 35%;
  height: 400px;
}

.table-wrapper {
  overflow: auto;
  width: 65%;
}

.container {
  display: flex;
  width: 100%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  </head>
  <body>
    <div class="container">
      <div class="table-wrapper">
        <table id="myTable" class="tablesorter tablesorter-default tablesorter7af52c677e1d6" role="grid">
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
            <th>Contact</th>
            <th>Notes</th>
            <th>Contact</th>
            <th>Country</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
          <tr>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
          <tr>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
          </tr>
        </table>
      </div>
      <iframe src="https://www.google.com/maps/"></iframe>
    </div>
  </body>
</html>

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

Solid Text Overlay on Transparent TextArea in JavaFX/CSS

In my JavaFX CSS style sheet, I currently have the following code for a tag called #myText in my FXML file. This code results in a black textArea with red text, which is exactly what I want. However, I now want to make the background of the textArea tran ...

javacssjavafxfxml

Is it possible to have the soft keyboard automatically appear when the page loads?

On an HTML5 website, I have an input element and I want the soft keyboard to automatically appear and focus on that input element. I attempted to use the 'autofocus' attribute on the 'input' element, but this only focused on the element ...

javascripthtmlinputfrontend

`Move the Hover effect to a different element upon mouseover``

In my setup, I have the following arrangement: <div class="menuHomeCategorias Accesoriosclass"> <div class="categoryName Accesorios" name="Accesorios"> <p>Accesorios</p> </div> <img class="categoriasHome" alt="Ca ...

javascriptjqueryhtmlcss

The multi-level navigation bar is not displaying properly

I am currently facing an issue with my Mega menu. It displays two levels of menus perfectly fine, but I need to add a third level as shown in the image below. However, when I try to include the third level, it disrupts the design and causes the Grand Child ...

javascriptjqueryhtmlcss

When my contact form is viewed on mobile, an unexpected margin appears

On my main page, I have a contact form positioned on top of an image slider that appears like this: https://i.sstatic.net/aGnj1.png The contact form is nested inside the slider's div as shown below: <div class="img-slide"> <div c ...

htmlcss

Is it possible to run both the frontend and backend on the same port when using vanilla JavaScript for the frontend and Node.js for the backend?

Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...

javascripthtmlnode.jsexpresshttpserver

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

csssass

When will the search bar toggle and the logo appear sliding down?

.navbar { background-color: #F91F46; } .src-bar { border: 0; border-radius: 5px; outline: none; padding-left: 15px; width: 30vw; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" in ...

htmlcssfrontendnavigationbootstrap-5

immediate removal upon pressing the button

Struggling to remove data from a datatable when clicking the delete button for quick admin side action. My code isn't functioning properly, even after attempted fixes. Here's my code: <div class="table-responsive"> <table id="datas" cl ...

phphtml

Different methods for creating a dynamic asp.net web Grid for mobile user interface (utilizing block display and selective column hiding)

Currently, I am developing a web application using asp.net mvc-4 and incorporating bootstrap 2.0 into the design. The main tool I am utilizing in almost every controller is the asp.net mvc web grid due to its efficient sorting, paging, and minimal code req ...

jquerycssasp.net-mvcresponsive-designwebgrid

Semantic UI Footer allows you to easily create a stylish

Greetings! I'm new to the semantic-ui framework and I'm encountering an issue with the footer. My goal is to have the footer always stay at the bottom of the page without being fixed. Here's a snippet of my simple HTML code: <!DOCTYPE h ...

htmlcsssemantic-ui

Unfortunately, I am currently unable to showcase the specifics of the items on my website

I am trying to create a functionality where clicking on a product enlarges the image and shows the details of the product as well. While I have successfully implemented the image enlargement, I am facing challenges in displaying the product details. Below ...

javascriptphpcss

Concealing a DisplayFor component with the help of Jquery

Hey there, I currently have a 'td' element that appears like this <td style="font-weight:bold"> @Html.DisplayFor(x => x.Parts[i].QtyInItem, new { htmlAttributes = new { @class = "qtyInItem" } }) </td> A ...

javascripthtmljqueryrazor

The CSS cursor style is taking precedence over the inline cursor style while dragging items in the list

I am currently utilizing the Nestable JS library and have a list of nestable items in my tree. I am trying to implement a cursor: pointer when hovering over them and a cursor: move when dragging. However, I am facing issues in getting this functionality to ...

javascriptjqueryhtmlcssjquery-ui

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

Issue with Material Design Lite input floating label not functioning properly post page navigation

I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...

angularjshtmlcssmaterial-design-lite

Steps for incorporating buttons and input fields on a WordPress website

I recently customized an HTML block on my WordPress.com site and created a simple code snippet to function as a search widget. I've experimented with various approaches, such as attempting to trigger a script function with a button, making the functi ...

htmlwordpress

I am unable to incorporate additional HTML files, resulting in the header not being displayed

<html> <?require('header.html');?> <!-- page content --> <p>Welcome to the headquarters of A1 Consulting. Take a moment to familiarize yourself with our services.</p> <p>We specialize i ...

html

Is it possible to make a model draggable but disable it specifically on input fields?

I'm exploring the implementation of a draggable feature by using both a JavaScript directive and the simple draggable="true" attribute. (Testing each method separately). Here's my basic code structure: <div draggable="true& ...

javascripthtmltypescript

Login form with AJAX for seamless submission without page refresh

I found a helpful tutorial on creating a login form at This tutorial focuses on authenticating against our LDAP server. However, I am running into an issue with the following line of code: success: function(){ $('form#submit').hide(function() ...

phpjqueryhtmlajax