Contact Block 2: map isn´t in iframe at several chrome-browsers

Blocks
,
1

Hi there, I have a strange problem: I´m using the contact 2 block. On serveral PCs (not all) the map isn´t shown at its place. It´s displayed on the left top corner. Chrome is at all PCs actual. I have no idea. At Edge and Firefox the map is displayed at the corrct position.
Thanks for help. Regards Uwe

2

Hi @Mr.Smith,
What framework are you using? Can you also show a screenshot of what you are seeing? Any other changes to the block? Any possibility that other styling on the page is impacting the block?
Thanks,
Bob

3

Hi Bob,

I´m using BS5. The screenshot is here:

google-map
google-map1200×611 79.6 KB

As you can see, the map is in the let corner of the top. It should be displayed under the headline.

Any changes: yes, I´ve modified the form, because I´m using the CMS Batflat.

Code is here:

<div class="container container-blog-text pghelper-bs4-grid-parent-relative" style="padding-bottom: 40px;">

                    <h2 class="h2-blog">Nehmen Sie Kontakt mit mir auf</h2>

                    <section class="bg-light position-relative">

                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2597.8224472595825!2d8.687965351630027!3d49.37443247924008!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4797c0855e1320a9%3A0xecc720a147ba4bf7!2spuncto%20-%20grafik%20%26%20marketing!5e0!3m2!1sde!2sde!4v1610809010019!5m2!1sde!2sde" height="550" frameborder="0" allowfullscreen="" aria-hidden="false" tabindex="0" width="100%" class="h-100 position-absolute w-100"></iframe>

                        <div class="d-lg-none invisible mb-5 pb-5 pt-5"></div>

                        <div class="container  pt-5 pt-lg-0">

                            <div class="row">

                                <div class="col-lg-7 col-xl-6 ml-auto py-3">

                                    <div class="bg-white mb-lg-0 p-4 p-lg-5 shadow">

                                        <h4 class="h4-kontaktformular mb-4">Ihre Nachricht</h4>

                                        {$contact.form}

                                                     

                                    </div>                                    

                                </div>                                

                            </div>                            

                        </div>                        

                    </section>

                </div>

I hope, you can help.

Regards Uwe

4

Hi Uwe,

I took a look at your website. And found out that it is not related to the Bootstrap “Contact Block 2” in PG. It is the property “columns: 1” in your class “container-blog-text” that causes this problem in Chrome.

Ciao
René

2 Likes
5

Hi René,

thank you! Great!

Regards Uwe