In what way can I ensure that my Google Map iFrame becomes responsive by utilizing Bootstrap?

My approach involved duplicating the iFrame code multiple times with different aspect ratios to show or hide them based on specific sizes. Is there a more efficient or concise way to achieve this?

<div class="container map d-none d-xl-block"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-lg-block d-xl-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="900" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-md-block d-lg-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="700" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
<div class="container map d-none d-sm-block d-md-none"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="530" height="400" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy"></iframe></div>
&It is okay to provide examples of what you are looking for and where it leads; amp;
<iframe/source>, some just need better resource management than others such as size maintenance.

javascripthtmlcsstwitter-bootstrapiframe

Answer №1

Upon close inspection, you will notice that the iframe contains the attribute width="1100". Simply update it to width="100%"

Answer №2

.custom-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
<div class="container map d-none d-xl-block">


<iframe class="custom-responsive-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2919.353178018696!2d47.4802444157619!3d42.97083340430253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x404ea15ce9e13f9f%3A0x42eb5720271dadf4!2sUlitsa%20Engel&#39;sa%2C%2030%2C%20Makhachkala%2C%20Respublika%20Dagestan%2C%20367015!5e0!3m2!1sen!2sru!4v1621256990741!5m2!1sen!2sru" width="1100" height="600" style="border:2px solid rgb(0, 183, 255);" allowfullscreen="" loading="lazy">
</iframe>

</div>

Now the iframe adjusts responsively

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

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

javascriptjquerycss

Using reduce in JavaScript to form a fresh object

I've been struggling with creating an object using reduce from a nested array. The task is to generate a new object with keys named _uid and values matching the initialValue from the objects that contain both properties. I have written a function that ...

javascriptarrays

Comparison of Web Development Techniques: localStorage versus Cached HTTP

Imagine a scenario where there is a web server responding to a GET request by sending a .json file. The response instructs the browser to cache it for a period of 5 years. Furthermore, picture a webpage that initiates this GET request for the JSON data du ...

javascriptajaxhtmllocal-storage

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

Utilize jQuery for parsing JSON data

Asking for help here because I am struggling with a seemingly simple task. Here is the JSON data that's causing me trouble: {"name":"cust_num","comparison":"starts_with","value":"01"}, {"name":"cust_name","comparison":"starts_with","value":"ad"}, {"n ...

javascriptjqueryjson

IE presenting problems with JQuery content loaded via Ajax

I operate a website that showcases various products, each with a corresponding link to a fancybox displaying detailed information about the product (detailed.php file). <a class="fancy fancy'.$_GET['type'].'" href="detail.php?id=&ap ...

javascriptphpjqueryhtmlajax

Learn how to implement a TAB key action in WebdriverIO

I'm currently working with the webdriverIO framework using the latest versions of Chrome browser (v77) and chromedriver (v77). Whenever I attempt to execute browser.keys("\uE004"), an error is thrown: Error: The requested resource coul ...

javascriptnode.jsseleniumdom-eventswebdriver-io

Steps for creating new users using a post request

I've been working on developing a chat application using react-chat-engine, and everything is running smoothly except for one issue - I'm struggling to figure out how to send a post request to create new users. Below is the code snippet I'v ...

javascriptreactjsreact-chat-engine

The HTML footer designed with bootstrap is not behaving as expected. It is not staying fixed at the bottom of the page and is not displaying at full width despite my coding efforts

Working on a small Sinatra app with bootstrap for layout, I'm encountering some issues. The layout is not sticking to the bottom and not displaying at 100% width as intended. Additionally, the footer text is not centering even after applying the text ...

htmlcsstwitter-bootstrapfooter

"Integrating JavaScript in C# Code Behind: A Step-by-Step Guide

Is there a way to trigger this javascript function using C# code in the backend when the page loads? Your assistance is greatly appreciated, thank you. <script type="text/javascript"> document.onkeydown = function (event) { event = ( ...

javascript

What are the steps for transforming an HTML page into a fully-fledged Vue or React project?

I have been customizing a dashboard using AdminLTE 3, removing unnecessary parts and modifying the HTML and CSS files. However, I now need to convert this project into either a Vue or React project. Currently, all I require is an index.html file with a bla ...

htmlreactjsvue.jsdashboardadminlte

Boost the dimensions of the content property within a CSS class

I am currently using the content property to display a dashed arrow "-->" in my CSS class. However, the arrow appears very small and I would like to increase its size directly in the CSS class itself. This arrow is meant to be displayed before each elem ...

htmlcss

Guide to setting up a datePicker in a cellEditorSelector

In my grid, I want to have different editors for different rows within the same column. The ag-Grid documentation provides information on how to achieve this using colDef.cellEditorSelector as a function: link I have successfully created unique editors fo ...

javascriptangularag-grid

Apply a blur effect to the entire container without targeting a specific element within it

How can I add a filter: blur(20px) to the div with class named todo, while excluding the div with class called modal? Could this be achieved using SCSS by any chance? Sample Code: .todo { display: grid; } .modal { display: grid; position: fixed; wid ...

htmlcssblur

javascript change string into an array of objects

let dataString = "{lat: -31.563910, lng: 147.154312};{lat: -33.718234, lng: 150.363181};{lat: -33.727111, lng: 150.371124}"; let dataArray = dataString.split(';'); Produces the following output: let dataArray = [ "{lat: -31.563910, lng: 147 ...

javascriptarrays

Arrangement of Divs Using CSS and HTML

Working on a New Website Hey there, I could really use some assistance in recreating the design shown in this image for my website project. I've made some progress but it's not quite coming together as expected. I'm struggling with positio ...

htmlcsspositioning

Submit information from an HTML form to a PHP script and then send the response back to the client using AJAX,

Looking to run a PHP script using AJAX or JavaScript from an HTML form and then receive the results on the HTML page. This is what my changepsw.php file looks like: <?php // PHP script for changing a password via the API. $system = $_POST['syst ...

javascriptphpjqueryhtmlajax

Navigating to the appropriate section by clicking on a navbar item with Bootstrap 5: A step-by-step guide

Hi everyone! I am just starting out in front-end development and I was hoping to get some clarification on a topic. I need to create a one-page website where the navigation bar links scroll down to the correct sections when clicked. It's all on one pa ...

htmlcssbootstrap-5

The image failed to load in React/Express

I'm currently working on a React/Express app and I've encountered an issue with images not loading. Instead, I see the message "could not load the image." The CSS styles are loading fine, but the images are not showing up. I suspect there might ...

javascriptnode.jsreactjswebpack

Using jQuery to swap out intricate background designs

I'm attempting to use jQuery to change the background-color of an element from: background: transparent linear-gradient(#C0B 45%, #C0B) to: background-color:#000; Unfortunately, my attempt to remove the background property with .removeAttr() has n ...

jquerycssbackground