Issue
I've got an issue, while trying to create an overlay above google maps iframe. The background-color isn't aplying in CSS. Are there any restrictions from Google and what's a proper solution to this?
.ellenonmap {
background-color:white!important;
text-align: center;
box-sizing: border-box;
width: 400px;
height: 400px;
margin-top: -300px;
margin-left: 100px;
}
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d100621.22936695188!2d23.66829933952863!3d37.990816432734675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1%3A0x2736354576668ddd!2zzpHOuM6uzr3OsQ!5e0!3m2!1sel!2sgr!4v1652863273042!5m2!1sel!2sgr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<section class="ellenonmap">
<h1>Επικοινωνία</h1><br>
<i class="fa-solid fa-location-dot"></i><h4>Το κατάστημά μας:</h4><br>
<h4><i class="fa-solid fa-location-dot"></i>Το κατάστημά μας:</h4><br>
</section>
Solution
Add position: relative;
to .ellenonmap
. Then you can adjust the style as you wish.
Answered By - kamil
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.