The Google Map is unable to expand to fill the entire width of the column

I have exhausted all my efforts trying to troubleshoot this issue on my project's contact page. Currently, I have a layout with 3 rows containing columns within a Bootstrap 4 grid. The third row is supposed to display a Google Map within a column set to col-12, but the map won't stretch to the full width. I have tried adjusting the HTML in the iframe to set the height and width to 100%, but it's not working. Can anyone point out what I might be missing?

<div class="container containerColor">
    <div class="row">
    <div class="col-12 text-center sectionContent bannerBody">
    <h1>contact</h1>
    </div>
    </div>
    
    <div class="row d-flex justify-content-center sectionContent bannerBody">
    <div class="col-xs-12 col-sm-12 col-md-4 sectionContent bannerBody">
    <div class="card cards">
    <h3 class="card-header cards-header">Hours of Operation</h3>
    <div class="card-body">
    <dl class="row d-flex justify-content-center">
    <dt class="col-6">Sunday</dt>
    <dd class="col-6">10am - 5pm</dd>
    <dt class="col-6">Monday</dt>
    <dd class="col-6">---</dd>
    <dt class="col-6">Tuesday</dt>
    <dd class="col-6">---</dd>
    <dt class="col-6">Wednesday</dt>
    <dd class="col-6">10am - 5pm</dd>
    <dt class="col-6">Thursday</dt>
    <dd class="col-6">10am - 6pm</dd>
    <dt class="col-6">Friday</dt>
    <dd class="col-6">---</dd>
    <dt class="col-6">Saturday</dt>
    <dd class="col-6">9am - 3pm</dd>
    </dl>
    </div>
    </div>
    </div>
    <div class="col-8 col-xs-12 col-sm-12 col-md-8">
    <div class="container" style="overflow-wrap: break-word">
    <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem eum adipisci quos animi earum repudiandae ipsum ut dignissimos vel suscipit dolor dolores vitae sapiente repellendus asperiores, tempora ea minus quisquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio distinctio error magni eaque quidem quaerat deleniti aut beatae. Mollitia maxime voluptatum, in magnam sed fuga autem nihil nulla perferendis saepe.
    </h1>
    </div>
    </div>
    <div class="row d-flex justify-content-center mt-5 mb-5">
    <div class="col-12">
    <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539%3A0xe2cd727e83aa610d!2s430%20S%20Rampart%20Blvd%20%23150%2C%20Las%20Vegas%2C%20NV%2089145!5e0!3m2!1sen!2sus!4v1634184552181!5m2!1sen!2sus"
    style="border: 2px solid; width: 100%; height: 100%;"
    allowfullscreen=""
    loading="lazy"
    ></iframe>
    </div>
    </div>
    </div>
    <!-- <div class="container sectionContent text-center flex-wrap"> -->
    <div class="row sectionContent">
    <div class="col-12 text-center">
    <h1 class="bannerBody">rachel<wbr />@jackofallfades.co</h1>
    </div>
    </div>
    </div>
htmlcssbootstrap-4

Answer №1

If you want to make an element 100% wide, simply add the w-100 class.

<div class="container d-flex justify-content-center mt-5 mb-5 w-100">
    <div class="col-12">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539%3A0xe2cd727e83aa610d!2s430%20S%20Rampart%20Blvd%20%23150%2C%20Las%20Vegas%2C%20NV%2089145!5e0!3m2!1en!2us!4v1634184552181!5m2!1en!2us"
            style="border: 2px solid; width: 100%; height: 100%;"
            allowfullscreen=""
            loading="lazy"
        ></iframe>
    </div>
</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

Once the AJAX callback is complete, the onblur event will revert back to the original field or the updated field

I am currently working with an AJAX callback: Here is the HTML snippet: <a onCLick="loadXMLDoc(id1,id2)">(Add)</a> This function triggers an AJAX method that replaces the "(Add)" text with a basic HTML input field. Subsequently, when there ...

javascripthtmlajaxcallback

Ways to dynamically update the content of a variable when the input value is modified

Essentially, I have a straightforward code snippet provided below. It is necessary to update the amount and email whenever those are modified by someone. UPDATE: Credit goes to @ellipsis. Your version is close to perfect, except for the data transmission ...

jqueryhtml

Using :nth-child on elements with the same class name does not produce the desired result

I attempted to utilize the :nth-child selector to target the first, third, and fifth elements with the class name "personal", but it did not work as expected. Is there an alternative method to specifically select these elements sharing the same class? I ha ...

htmlcss

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

I am in the process of developing a 3D editor that allows users to manipulate a 3D scene and then view the result by pressing a "play" button. In order to display the output, I am utilizing an iframe. Below is the snippet of my HTML code: <iframe id=&qu ...

javascripthtmliframethree.js

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

When hovering, the CSS animation will rotate an additional 45 degrees

Currently, I have an element set to rotate 45 degrees when the website is displayed, and this functionality is working as expected. However, I am now looking to enhance it further by making the element rotate an additional 45 degrees every time it is hover ...

htmlcssanimationrotation

Incorporate a website design template into your Visual Studio project

I have a website application that I created but it's currently empty. I would like to add some style to it using online free website templates that I downloaded. However, I'm unsure of how to incorporate the css, font, and images folders into the ...

c#cssmodel-view-controllertwitter-bootstrap-3

Extension for web design snippet

My program creates dynamic html documents using specific parameters, but there is one section that remains static and is pulled from a local text file. What would be the most appropriate file extension to use for this particular snippet? htm(l): Although ...

htmltext-filesfile-extensiondynamically-generated

modifying the child divs contained in the main div

Hey there! I'm currently using Bootstrap to design an application and I've got the entire form inside a container. However, as I add more child elements within the container div, I would like the parent div to expand automatically to show all the ...

jqueryhtmlcsstwitter-bootstrap

Utilizing CSS to smoothly transition elements as they fill in empty space

As I have multiple blocks of content, I slide one to the side and then remove it. Once that is completed, I want the blocks below it to smoothly move up and fill the space. Check out this JSFiddle Example for reference HTML Code <div id="container"&g ...

htmlcsstransition

What is the best way to update the content of a modal using jQuery and AJAX?

Despite previous inquiries on this matter, none of the answers provided have been helpful to me. Therefore, I am addressing the issue again... I am currently developing the frontend of a website that does not involve any backend functionality (no server c ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Perfecting the Radio Button Selection (because why not?)

Struggling to round the outer corners of three inline squared radio buttons with unique IDs. Need help fixing my CSS syntax - I can get each button to individually round its corners, but not just radio1 and radio3's outer corners. Check out the issue ...

radio-buttoncss

Concealed file selection in Python Automation with Selenium

I'm experiencing an issue while attempting to upload a file to a hidden file input using Python Selenium. To provide more clarity, please refer to the image linked below. Example of Issue For the first field, I uploaded a file myself. Here's a ...

pythonhtmlselenium

How to create a looping animation effect for a div using CSS on hover

Using Bootstrap framework with Wordpress site .test { position: absolute; z-index: 9; left: 50%; height: 10em; width: 10em; margin-left: -5em; background-size: cover; opacity: 0; transition: opacity 0.5s ease; transform: translateY(- ...

javascriptjqueryhtmlcss

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

Instructions on adjusting the height of a flexbox container to utilize the available space

I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...

cssflexbox

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

htmlcss

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

What could be causing an unidentified term to be included in the Vue SCSS compilation process

In my Vue application with TypeScript, I encountered an error during compilation that reads as follows: Failed to compile. ./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostL ...

cssvue.jssass

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

javascriptcsshighcharts