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.	Help Needed on Some CSS 1 points by acidpanda 2 years ago \| 5 comments
2.	What are you most interested in? 11 points by acidpanda 2 years ago \| 14 comments
3.	Do we need dei in tech? 13 points by acidpanda 2 years ago \| 21 comments

user:	acidpanda
created:	January 3, 2024
karma:	3