Adjust iframe heights to 1/2 of viewport and set width to 800 pixels

This commit is contained in:
Daniel LaForce 2024-08-02 15:53:00 -06:00
parent af7ada529b
commit 06c8154d0d
1 changed files with 5 additions and 3 deletions

View File

@ -29,7 +29,9 @@
iframe { iframe {
flex: 1; flex: 1;
border: none; border: none;
height: 33%; /* Adjust to 1/3 of the viewport height */ height: 50vh; /* Adjust to 1/2 of the viewport height */
width: 800px; /* Set fixed width */
max-width: 100%; /* Ensure it doesn't overflow on smaller screens */
} }
.buttons { .buttons {
width: 100%; width: 100%;
@ -61,8 +63,8 @@
<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; flex: 1;"></iframe>
</div> </div>
<div class="buttons"> <div class="buttons">
<button onclick="window.location.href='https://rebrand.ly/csmsgoogle'">View on Google Maps</button> <button onclick="window.open('https://rebrand.ly/csmsgoogle', '_blank')">View on Google Maps</button>
<button onclick="window.location.href='https://rebrand.ly/csmsgaia'">View on Gaia GPS</button> <button onclick="window.open('https://rebrand.ly/csmsgaia', '_blank')">View on Gaia GPS</button>
</div> </div>
</body> </body>
</html> </html>