Is there a way to ensure that the embedded map remains within the confines of its container?

I am trying to add a map to my website, but it is overflowing its container.
I have attempted to reduce its width, but it still exceeds the boundaries of the div.
Below is the Bootstrap code I am using:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbfb2b2a9aea9afbcad9de8f3edf3ef">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="p-4">
  <div class="container">
      <div class="row">


          <div class="col-md-4">

          </div>



          <div class="col-md-8 bg-warning">


              <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26610.33705707623!2d36.25777643698207!3d33.519789553048696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1518e74d9556cc31%3A0x1ccf35bcb0a51b26!2sStory%20corner!5e0!3m2!1sen!2s!4v1629485063423!5m2!1sen!2s" width="400px" height="400px" style="border:0;" allowfullscreen="" loading="lazy"></iframe>


          </div>

      </div>
  </div>
</section>

htmlcssbootstrap-5

Answer №1

For your iframe tag, assign the w-100 class:

<iframe class="map w-100" src="" loading="lazy"></iframe>

Answer №2

Adjust the width property of the iframe to "100%"

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404716a746a76">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<section class="p-4">
  <div class="container">
      <div class="row">


          <div class="col-md-4">

          </div>



          <div class="col-md-8 bg-warning">


              <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26610.33705707623!2d36.25777643698207!3d33.519789553048696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1518e74d9556cc31%3A0x1ccf35bcb0a51b26!2sStory%20corner!5e0!3m2!1sen!2s!4v1629485063423!5m2!1sen!2s" width="100%" height="400px" style="border:0;" allowfullscreen="" loading="lazy"></iframe>


          </div>

      </div>
  </div>
</section>

Answer №3

The div element in question should contain an iframe with preset width and height dimensions.

To adjust the sizing, you can modify the inline attributes or introduce custom styles for the iframe container

.map { width: 100%; height: auto; }

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

How to target the last child in Flexbox using CSS order property

Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-chi ...

javascriptjquerycss

"Big Cartel - Effortless File Upload and Geolocation with JQuery

Check out my site here: I've been experimenting with images on my product pages and even created a test page. I have a few questions that I can't seem to figure out: Where should I host a jquery file? Do I need to include the jquery src for b ...

javascriptjqueryhtmlcssbigcartel

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

javascriptjquerycss

every cell should be painted a distinct hue

I need to create a 10x10 array in JavaScript and fill each cell in the 2D array with different colors using canvas. I have managed to do this part, but now I am stuck on how to check if each cell has a different color from its neighbors. Any suggestions ...

javascripthtmlcanvas

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

When I wanted to stretch a background image on my website so that it always fills the available window area regardless of resolution, I initially used background-size:cover;. Unfortunately, Internet Explorer doesn't seem to support valid CSS, so I had ...

jquerycssinternet-explorer-8

Opting for CSS3 transitions over jQuery animate

Currently, I am working on animating a block of HTML that involves fading in (opacity) and slightly moving from the left (margin-left)... $('.latest-stats').delay(1000).animate({ opacity: 1, marginLeft: '55px' }, 1000, function () { ...

javascriptjquerycss

The btn-group dropdown feature in Angular with bootstrap appears to be malfunctioning, However, the nav-item dropdown feature

Does anyone have an idea why the btn-group dropdown isn't functioning properly while the nav-item dropdown is? <div class="col-md-4"> <div class="btn-group dropdown"> ...

htmlcssangularbootstrap-5

I have encountered an issue with my rows breaking improperly when viewing them in a PDF format, particularly when I include a minus

Whenever I try to view my HTML page in PDF form, I encounter an issue. The problem arises when the numerical values are too large, causing a line break between the minus sign and the values. Here is an example of the HTML page which appears perfectly: ent ...

javascriptpythonhtmlpdfwkhtmltopdf

What is the reason that the CSS property overflow:hidden does not function properly on a table data cell

Why isn't the overflow: hidden property working on my table? <table width="100%" style="table-layout:fixed"> <tr height="200"> <td width="100%" height="200" valign="middle" style="text-align: center; overflow: hidden;"> ...

htmlcssemail

Having trouble getting text alignment to work properly in Internet Explorer?

I'm attempting to align my "li" elements in a row so that I can display three images side by side with text below them, similar to a product catalog view. While everything looks good in Chrome, Internet Explorer is only aligning everything to the left ...

htmlcssgoogle-chromeinternet-explorer

Applying custom CSS to individual divs based on their text height using jQuery

I have a grid consisting of multiple boxes each sized at 280px by 280px, and I am seeking a way to vertically align text within hover overlays on each box. While my current code successfully aligns the text for the first box, I am encountering issues due ...

javascriptjqueryhtmlcss

Angular Navigation component

I am looking to display the navigation bar and footer on various components, but there are certain components where I do not want to include them. If I place the header and footer in app.component.html, they will display on every page. Is there a way for ...

angularbootstrap-5navigationbar

Responsive Font Sizing in React Native

Does React Native automatically adjust font size based on screen size? If I set the fontSize to 10 for a Text component, will it resize according to different phone sizes? If not, what is the best way to make fonts responsive in React Native? ...

cssreact-nativeresponsive-design

What's the best way to handle variables and numerical calculations within PHP loops when dealing with forms?

I'm currently developing a basic PHP page where users can choose how many numbers they want to add together. After selecting the quantity, they input the numbers on a new page, click a button, and then see the sum displayed. The challenge I'm fa ...

javascriptphpjqueryhtmlajax

Choose an item from the list and use the scrollbar when the menu opens

My select element has over 50 options, but the options popup and go off the page without a scroll bar. As a result, I can only see and select up to 20 options. Is there a way to make the select element display a vertical scroll bar when there are more tha ...

htmlcss

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

htmlcsscss-selectors

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

https://i.sstatic.net/Ov3yF.png I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. The ...

cssreactjsmaterial-ui

What could be causing my popup window to not display on top of all other HTML elements?

.box { width: 40%; margin: 0 auto; padding: 35px; border-radius: 20px/50px; background-clip: padding-box; text-align: center; display: inline-block; } .button { font-size: 1em; padding: 10px; color: #222; border: 2px solid #06D85F; ...

htmlcss

code snippet showing HTML element's visibility

I have a component in my HTML that I need to hide: <div class="hid" > <select > <option value="M">Male</option> <option value="F">Female</option> </select> </div> To hide the component, I added ...

htmlcomponentshide

Difficulty with JQuery Show and Hide Functionality

I've implemented a jQuery menu, but encountering the issue where clicking on any menu link opens all menus instead of just the one clicked. I've attempted to resolve this by using show and hide classes, however, it seems that nothing is working n ...

jqueryhtmlcss