Troubleshooting CSS Text Display on HTML5 Video for Mobile Devices

I am currently working on positioning text and a button over an HTML5 video without using media queries to address mobile display issues. The problem arises when using the car-image-overlay class from Bootstrap 4 to show the div containing the text over the video. Despite trying various Bootstrap 4 classes for alignment, such as centering and left aligning, the layout breaks on mobile devices like the iPhone 5e. The button, h1, and p elements do not adjust, causing them to cover the entire video and go out of frame. I initially expected Bootstrap to handle this seamlessly, but it appears I may be implementing it incorrectly. I have tried utilizing col-lg and xs classes, but to no avail.

https://i.sstatic.net/YP0O9.jpg

.cta-video-section .cta-video-container {
  position: relative;
}
.cta-video-section .cta-video-container video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}
.cta-video-section .cta-video-container h2 {
  color: white;
}
.cta-video-section .cta-video-container p {
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 1.1rem;
}
.cta-video-section .cta-video-container button {
  white-space: normal;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>



    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">


</head>

<body>

    <div class="container">
<div class="cta-video-section">
        <div class="cta-video-container">
                <video id="cta-video" autoplay loop muted>
                    <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">                Your
                    browser does not support the video tag.
                </video>
                <div class="card-img-overlay d-flex align-items-center" id="cta-video-texts">
                        <div class="row">
                            <div class="text-left col-xs-1 col-lg-4 ">
                                <h2 class="card-title ">H2 Locations Headline</h2>
                                <p class="card-text ">This is a wider card with supporting text below as a natural lead-in to additional
                                    content. This content is a little bit longer.</p>
                                <div class="">
                                    <button class="btn btn-danger  btn-lg " id="cta-video-button">                                
                                            Watch Video CTA
                                    </button>
            
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
</div>
 


    </div>
    
</body>

</html>

Answer №1

What is the reason for avoiding media queries?

In my opinion, addressing the issue can be possible by adjusting the title, paragraph content, and button text and size specifically for the mobile version.

Answer №2

To optimize your website for smaller devices, consider decreasing the font size or line height in your media queries. Larger font sizes can pose a problem on compact screens.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use jQuery to display the user input value in real-time

I am in the process of developing a dynamic calculation program to sharpen my jQuery skills, but unfortunately, I'm facing some challenges. I have managed to store values in variables as shown in the code snippet below. <form> Table of: ...

Formatting specific elements within an array

I am working with an array of names, some of which are repeated. These names are then split in half and displayed as li. One thing I am struggling to figure out is how to style the name Joeyc with text-decoration: line-through; on all instances of .book w ...

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

HTML Tutorial: A Beginner's Guide to Invoking REST API

Hi there! I'm new to APIs and struggling to grasp the concept. The tutorials online seem more complex than necessary. Here's what I need help with: I want to create a basic webpage that allows me to search for information using the Pokemon API a ...

Incorporating image hyperlinks onto a designated webpage within a JavaScript presentation carousel

Working on an e-commerce website, the client has requested 3 slide shows to run simultaneously displaying specials or promotions. I have successfully set up the 3 slide shows next to each other, but I'm unsure how to incorporate image links that direc ...

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Currently, I have a Div element with absolute positioning: <div id="target" style="height: 300px; position: absolute; top: 275px;"></div> My goal is to calculate the horizontal resolution of the screen using JavaScript. With this width, I the ...

Replacing an array element in React.js

Here is a React.js code snippet where I am trying to utilize an array called distances from the file Constants.js in my Main.js file. Specifically, I want to replace the APT column in the sampleData with a suitable value from the array distances extracted ...

Exploring ways to expand the card tile size with Bootstrap CSS class

Currently, I am utilizing form.IO, which provides a field for targeting controls with Bootstrap custom CSS Classes. No syle tags and no .control{font-size:20px}. Remember, you can use multiple classes separated by a space. For example: card-title mb-2 tex ...

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

Strategies for troubleshooting unexpected responsive breakpoints

Currently, I am utilizing Bootstrap 4 alpha 4 for my project. I recently purchased a website that I have begun to examine and modify. One peculiar issue has arisen which seems to be related to media queries in some way. The original developers declined to ...

Wrap text elegantly around your images with Flex Mobile

Looking to develop a component for a Flex Mobile app that will allow me to have text wrapped around an image, similar to what you see in articles or blogs. In HTML, this can be achieved with a tag like: <image align='right' /> associated t ...

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet: function ...

How to open a PDF file in a new tab using Angular

Within my Angular 12 application, I am seeking to enable users to "view" a PDF file stored locally in the application within a new tab on Google Chrome. Currently, when implementing the code below in HTML, the file downloads rather than opening in a new ta ...

"pre and post" historical context

Is there a way to create a stunning "Before and After" effect using full-sized background images? It would be amazing if I could achieve this! I've been experimenting with different examples but can't seem to get the second 'reveal' di ...

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

Updating the background color using typescript

Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...

Increase the background image size for a <li> element

I am working with an unordered list and have set it up to display a background image on the li element when the cursor hovers over it: <div class="sidebar"> <ul> <li>test</li> <li>test</li> ...

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

Display a message indicating unavailability when no events are scheduled and adjust the background color in FullCalendar

In one of my projects, I am utilizing jQuery FullCalendar to schedule appointments for doctors. The doctors should be able to specify their availability between 9 AM - 5 PM on weekdays. If this is not set, the background color of the spans of time not boo ...

How to access HTML content in Python web scraping with a delay?

Currently, I am using Python to scrape the HTML from this site: Upon accessing the webpage, you'll notice that the content changes within a few seconds. This page displays the latest posts on a forum, and my goal is to create a Discord bot that can s ...