Responsive Iframe设计

My website has an issue with making the iframe responsive. The map displays correctly on a computer, but is invisible on mobile phones. I am currently using Bootstrap for the layout.

<div class="container d-none d-sm-block mb-5 pb-4">
<div class="wrapper" id="map" style="height: 480px; position: relative; overflow: hidden;">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5994.821337674272!2d69.25345364107476!3d41.29992894681807!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38ae8ae3e16117eb%3A0xe38bf57767a5d5a9!2z0KjQutC-0LvQsCDihJY5MQ!5e0!3m2!1sru!2s!4v1689872593583!5m2!1sru!2s"
            width="1100" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

I suspect that the issue may be related to Bootstrap styling, so here are the relevant links and scripts:

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb0aeb2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869884">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>


<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
...
htmlcssdjangobootstrap-5

Answer №1

Your main container includes the code d-none d-sm-block. This signifies in Bootstrap that the element initially has a display: none; property and only changes to display: block; when the screen width reaches 576px or larger. For further understanding, refer to the CSS and Bootstrap documentation.

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

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...

javascriptjqueryhtmlcssimage

Empty body detected in Jquery AJAX request with Django REST running in a Docker environment

Using JavaScript to load a template called index.html from the /static directory. The JavaScript code in app.js: var obj = new Object(); obj.startTime = "123"; obj.endTime = "456"; console.log("fetchNext "+JSON.stringify(obj)); v ...

javascriptpythonajaxdjango

eliminate the offspring of a component (chessboard)

Hey there! I'm currently working on developing a chess game and I could really use your expertise to help me solve an issue. In my code, when I try to move a piece in the game, this is what happens: 1. First, I remove the existing piece from its cu ...

javascripthtmlcsschess

Customize the url.html template in Django Admin

I've customized the template url.html (template path: /admin/widgets/url.html) file within Django Admin. I want to store this customized file in my project folder so that whenever the functionality of url.html is required, the admin app will refer to ...

djangodjango-templatesdjango-admin

Guide on resolving the issue of disabled button's tooltip not appearing upon being hovered over

I have a button that looks like this: <a data-toggle="tab" href="#part4" class="btn btn-info tabcontrol mainbutton col-2 offset-8 disabled" id="part3to4" title="Please acknowledge the checkbox before going next" data-toggle="tooltip" data-html="true" d ...

jqueryhtmltwitter-bootstrap

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

htmlcssgoogle-chromecontenteditable

Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and cl ...

htmlcssiconscss-positionfont-awesome

The most effective approach to translating in Django

I have been attempting to send emails in two languages using django but I seem to be facing some issues. Here is how I have configured it in my settings.py: LANGUAGE_CODE = 'en-us' LOCALE_PATHS = ( os.path.join(BASE_DIR, 'locale' ...

django

Error: Unable to instantiate a THREE.Scene object in Three.js due to TypeError

Recently, I decided to experiment with Three.js in order to incorporate it into a project of mine. However, upon running the initial example provided in the documentation: <html> <head> <title>My first Three.js app</title& ...

javascripthtmlthree.js

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...

javascriptjqueryhtmlcssforms

Eliminate the hover effect from every element

Is there a method in CSS or Javascript that allows me to eliminate the hover effect on all elements? I am specifically looking for a solution that will disable the hover effect on mobile devices while keeping it intact on desktop. I attempted using pointer ...

javascripthtmlcss

How to correct header alignment in HTML for Google Table

Utilizing the google visualization table to generate a html table, I have successfully fixed the top section of the html using the stuckpart div. This ensures that regardless of how I scroll, the button remains in place. However, I now aim to fix the table ...

javascriptjqueryhtmlcssgoogle-visualization

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

javascriptjqueryhtmlcsscss-animations

Each column has its own scroll bar, making use of 100% of the available space within a container that is 100%

I am attempting to create 3 columns, each with its own scroll bar, while also taking up 100% of the available space. However, I am facing issues where there is either no scroll bar present or the columns are not occupying 100% of the available space. It ...

csstwitter-bootstrap-3bootstrap-5

Retrieve an image using screen resolution parameters [using only HTML]

During a recent interview, the interviewer posed an interesting question regarding 2 images: There is one large resolution image that needs to be displayed on laptops and desktops. There is also a small image that should only be shown on mobile devices. ...

javascripthtmlcss

Is it normal that my website isn't scrollable on an iPhone?

I have a hunch that the issue is related to the CSS, or perhaps it could be due to including the parallax JavaScript library. You can view the site at Below is the SASS code snippet: @import "compass/css3"; /* Sticky footer styles ---------------------- ...

ioscsscoffeescriptsassparallax

Determine the location of an image with the help of Jquery

I'm currently working on finding the position of an image with Jquery. The issue I am facing is that it only provides me with the initial position of the image when the document was loaded. $(".frog").click(function(){ alert($(".frog").position() ...

javascriptjqueryhtmlimage

It is not possible to dynamically change the value of a checkbox using jQuery when it is checked or

When the checkbox value is changed to 1, it cannot be changed back to 0 when unchecked. $('.ChkBox').change(function() { if ($(this).attr('checked')) { $(this).val('1'); } else { $(this).val('0'); } ...

jqueryhtml

Instructions on keeping a numerical counter at its current value for all site visitors

Recently, I integrated a number counter into my website. However, I am facing an issue where the count resets to zero whenever a new visitor accesses the site. I'd like the count to remain persistent and update based on the previous count. For instanc ...

javascripthtml

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity