acidpanda

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:

******

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

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

I’m asking this because I think about PG’s essay on “How to do Great Work” at least once a week and until this point, I haven’t connected to the YC community. I’m curious to learn of some new things y’all studying, making, or are obsessively curious about.

I’ll start: my main interests right now are online social networks.

Looking for civil discourse only. Paul Graham tweeted the other day about Brian Armstrong being "ahead of his time" in response to Google and Meta slashing DEI-related jobs, and today said "Prediction: Wokeness will recede significantly in 2024.. I think wokeness actually peaked in 2020 or 2021 and has been slowly contracting since then..."

As a Black American, and a founder, I find it concerning that people are still thinking DEI, affirmative action, and "wokeness" are politically correct agendas (especially since we are now in a U.S. Election year). I believe that DEI is necessary to facilitate diversity in perspective in helping build great technology. "Wokeness" is becoming a derogatory term to promote willful ignorance (the opposite of "woke" is "sleep.") What do y'all think?