Do y'all usually ask programming questions on here? Couldn't search for any but I'm working to familiarize myself with web development and programming in general.<p>I'm running into this issue with my website on mobile browsers where I'm trying to put a video inside a TV image, and a "Watch" button on top of the video that links to Twitch. And to top it off, the mobile browsers seem to completely ignore the font (I figure I can solve that later).<p>Here's a snippet of my HTML code that shows the classes:<p>******<p><!-- TV ATTEMPT-->
<div class="testingclass">
<img class="tvImageClass" src="UX_UI\TV90S.png" alt="tv" /> <!-- TV Screen Image -->
<a href="https://www.twitch.tv/antighfest" class="watchButton"> <!-- Watch button that links to Twitch. Supposed to fit inside TV Image.-->
<img src="UX_UI\BUTTONZ\WATCH_BUTTON.png" alt="watch" style="width: 200px; height: auto;" />
</a><p><pre><code> <video class="trailerVideo" autoplay muted loop playsinline>
<source src="UX_UI\VIDEO\TRAILERZ\2024 - 24hrz_close_to_final.mp4" type="video/mp4"> <!-- The Video that's supposed fit inside the TV screen image-->
</video>
</div>
</code></pre>
******
And here's my mobile CSS snippet:
******<p>/* For mobile screens smaller than 768px <i>/
@media (max-width: 768px) {<p><pre><code> .testingclass {
position: relative;
text-align: center;
height: 100vh;
}
.watchButton, .tvImageClass, .trailerVideo {
position: relative;
margin: auto;
max-width: 100%;
display: block;
}
.tvImageClass {
/* position: relative; */
justify-content: center;
width: 50px;
max-width: 50px;
height: 50px;
max-height: 50px;
object-fit: contain;
}
.trailerVideo {
/* position: relative; */
justify-content: center;
width: 50px;
max-width: 50px;
height: 50px;
max-height: 50px;
object-fit: contain;
}
</code></pre>
}
*********</i>
Everything on mobile fits except for the trailerVideo and tvImageClass - they appear unusually large on mobile. Is there an efficient way to stack these assets so that they don't blow out the pages? So far I've only tested on Safari mobile - and if you want to see what I'm talking about you can go to antighfest.tv on your phone.
StsckOverflow for sure, but at quick glance:<p>- vh is an interesting choice for units. I’ve been out of the game for a couple of years but I don’t think that’s what you want to use (or vw for that matter).<p>- fonts are loaded from the device the webpage is being loaded from. To ensure your fonts display on any/all devices, regardless of whether they have the font installed locally, use something like Google Fonts to add a link to the fonts in your HTML.