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.

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).

Here's a snippet of my HTML code that shows the classes:

******

<div class="testingclass"> <img class="tvImageClass" src="UX_UI\TV90S.png" alt="tv" />  <a href="https://www.twitch.tv/antighfest" class="watchButton">  <img src="UX_UI\BUTTONZ\WATCH_BUTTON.png" alt="watch" style="width: 200px; height: auto;" /> </a>

      <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>

****** And here's my mobile CSS snippet: ******

/* For mobile screens smaller than 768px / @media (max-width: 768px) {

  .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; 
  }

} ********* 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.

1.	Agile Is a Tainted Term(pcloadletter.dev) 76 points by peterkonsz 2 years ago \| 107 comments
2.	Ask HN: Do you refuse to do coding challenges for software engineer interviews? 5 points by peterkonsz 3 years ago \| 16 comments
3.	Ask HN: Has web accessibility gotten worse since the advent of single page apps? 2 points by peterkonsz 3 years ago \| 3 comments

user:	peterkonsz
created:	March 23, 2023
karma:	45