Center iframes and increase height by 10%

This commit is contained in:
Daniel LaForce 2024-08-02 15:55:06 -06:00
parent 06c8154d0d
commit 79e2b123ab
1 changed files with 4 additions and 3 deletions

View File

@ -24,12 +24,13 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; /* Change to column for vertical stacking */ flex-direction: column; /* Change to column for vertical stacking */
align-items: center; /* Center the iframes horizontally */
flex: 1; flex: 1;
} }
iframe { iframe {
flex: 1; flex: 1;
border: none; border: none;
height: 50vh; /* Adjust to 1/2 of the viewport height */ height: 55vh; /* Increase height by 10% */
width: 800px; /* Set fixed width */ width: 800px; /* Set fixed width */
max-width: 100%; /* Ensure it doesn't overflow on smaller screens */ max-width: 100%; /* Ensure it doesn't overflow on smaller screens */
} }
@ -59,8 +60,8 @@
<h1>CSMS Claims and Neighbors</h1> <h1>CSMS Claims and Neighbors</h1>
</div> </div>
<div class="map-container"> <div class="map-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F" style="border:none; overflow-y: hidden; background-color:white; flex: 1;"></iframe> <iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F" style="border:none; overflow-y: hidden; background-color:white;"></iframe>
<iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True" style="border:none; overflow-y: hidden; background-color:white; flex: 1;"></iframe> <iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True" style="border:none; overflow-y: hidden; background-color:white;"></iframe>
</div> </div>
<div class="buttons"> <div class="buttons">
<button onclick="window.open('https://rebrand.ly/csmsgoogle', '_blank')">View on Google Maps</button> <button onclick="window.open('https://rebrand.ly/csmsgoogle', '_blank')">View on Google Maps</button>