What is the reason for the excessive width of the margin on embedded videos when the `sm-4` class is added?

Just for testing purposes, I created the following code:

<div id="reo" class="reo">
    <div class="container">
        <div class="row">
            <div class="col m-3 embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
            </div>
            <div class="col m-3 embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
            </div>
            <div class="col m-3 embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

It's working correctly, but when I add a specific column size like col-sm-4, the videos become too large and stack on top of each other instead of aligning in a row.

While everything else within the columns looks good, it's puzzling why assigning a size to the column affects the responsiveness of the embedded videos while not impacting other content inside the columns.

htmlcsstwitter-bootstrapweb

Answer №1

The reason for this issue is the presence of the class name "m-3" in your CSS file, which adds a margin of 1rem to each div element. As a result, when combined with col-sm-4 (33.333333%), the total width of three divs exceeds 100% by 3rem.

To resolve this, consider removing the "m-3" class and using padding (p-3) instead.

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

Customizing checkbox appearance without including a label

After following a tutorial on how to style checkboxes found here, I was able to create a custom styled checkbox. However, I noticed that when I removed the label from the checkbox, it disappeared and was no longer visible. Is there a way to display the c ...

htmlcsscheckbox

Attempting to change the appearance of my jQuery arrow image when toggling the visibility of content

Here is a sample of my JQuery code: $(document).ready(function() { $(".neverseen img").click(function() { $(".neverseen p").slideToggle("slow"); return false; }); }); Below is the corresponding HTML: <div class="neverseen"> <h1> ...

jqueryhtmlcsstoggle

When I have a lengthy description, the alignment of the CSS DIV prices becomes misaligned

When I have a long description, the prices appear misaligned. You can take a look at it here: https://i.sstatic.net/aXgaj.jpg For the JSFiddle example, visit: https://jsfiddle.net/2n19tv75/ .border-gray { border: 1px solid #e5e7eb; float: left; w ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

The website displays perfectly in Atom, however, it is not functional in any web browser

My website is currently in the development phase, and I'm experiencing issues with certain div elements not positioning correctly once the site goes live. Specifically, the "Follow Us" tab at the bottom of the site, among other divs, has been affecte ...

javascripthtmlcss

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

What is the best way to add a box shadow to just one side of an element?

Is there a way to apply an inset box-shadow to only one side of a div? I am specifically referring to an inset shadow, not the usual outer box-shadow. For instance, in the JSFiddle below, you can observe that the inset shadow is visible on all four sides, ...

css

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

cssreactjsmaterial-ui

Relative Vs Absolute Positioning: Which One to Choose?

Can you explain the distinction between position: relative and position: absolute in CSS? Additionally, when is it appropriate to utilize each one? ...

css

Ensuring the h3 element occupies the same amount of space as the text it contains

My goal is to have an h3 element take up only the space as the text inside it. I am unable to use span directly for this purpose. Even encapsulating the h3 element with a span did not yield the desired outcome. The red color should stretch horizontally onl ...

htmlcss

Deactivate a form when the page loads and activate it upon clicking a button

I have a form that I want to initially disable when the page loads. I am looking to enable it only after clicking a specific button. The technologies I'm using for this are HTML and Angular. <form name="form" id="form"> <input type="text"&g ...

javascripthtmlcssforms

Combining scale and rotate transformations distorts the appearance of the content

When working with CSS3, my goal is to achieve this: <div style="position:absolute; left:300px; top:300px; width:100px; height:50px; border:1px solid black; transform: scaleX(2) ...

cssmatrixrotationscaletransformation

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

What is the best way to apply the same effect to multiple images without affecting the ones I haven't hovered over?

I am currently facing an issue with 6 images displayed in a table, 3 per row across 2 rows. I applied the "grow" effect to all the images but it seems like everything is moving around in a confusing manner. Does anyone have suggestions on how I can resolve ...

htmlimagecsshtml-table

The embedment of wmv videos does not include the option for a fullscreen button

I am currently attempting to insert a wmv video into an HTML code. The file plays without any issues, however, I would like the website's users to have the option to view the video in fullscreen mode by clicking on a fullscreen button. Unfortunately, ...

htmlvideoembeddingwmv

Creating a column with image that takes up 100% height using CSS

I have been experimenting with various techniques, but I am encountering a challenge with this particular issue. My goal is to create columns within a section where each column has a height of 100%. The complication arises when one of the columns contains ...

htmlcssheight

What could be causing the incorrect value of the endpoint of an element when utilizing a function?

By adding angles individually and then using ttheta (without calling a function to add angles and then using ttheta), the problem is resolved. However, can anyone explain why using a function here is incorrect or identify the issue that this function is ca ...

javascripthtmlcss

Achieving Perfect Alignment in Dreamweaver: Crafting a Stylish Header Container

Hello, I am currently working on a Dreamweaver site and have created a CSS style sheet within my template that includes a div tag called #HeaderBox. My goal is to make this box 40% of the screen's size, with specific pixel dimensions if necessary. I a ...

csshtmldreamweavercenter

The Protocol Check is failing to trigger from the success callback of the preceding protocol assessment

The behavior varies across different browsers. Google Chrome: It can call the first one but cannot call the second one. $(function () { $("div[href]").click(function (event) { debugger; window.protocolCheck("abcd:", ...

javascripthtmlcustom-protocol

Sticky footer in Bootstrap causing content to overlap

I'm a beginner when it comes to Bootstrap, and I'm attempting to integrate it with Symfony2. I currently have a sticky top bar in place for navigation purposes. However, I'm facing an issue when I try to add a similar sticky footer at the bo ...

htmlcsstwitter-bootstrap

Filter search results to display only posts

My website uses a custom Wordpress theme that has a search functionality. The issue I'm facing is that when I perform a search, it redirects me to the search.php page. However, instead of just displaying posts, it also shows pages and events from the ...

phphtmlwordpress