The Bootstrap container-build fails to expand to the full width of the screen despite using the p-

When it comes to screens, I set padding at 0 for container-fluid but the screen still doesn't occupy the full width when it's less than or equal to 1024 pixels.

.container-fluid {
    background-color: #e2e5f4;
    height: 600px; 
    margin-bottom: 200px;
    padding: 0;
}

Solution: for 1024- set width to 101%; for 768- set width to 112%; for 320- set width to 112%;

Here is the HTML code:

<div class="container-fluid p-0">
    <div class="row border bg-danger p-0">
        <div class="col-md-7  p-0">
        <div class="MededX"> 
                MEDedX
        </div>
        <div class="capture_tittle">
            liunhliunh
            <br> lunliu luinu liuni 
            <br> nllniun Nilo ahh
        </div>

        <div class="subCapture_tittle">
            LOerm Swaminarayan swmainarayan swaminarayan swaminarayan                        

        </div>

    </div>

    <div class="col-md-5 p-0 ">

        <div>
            <img class= "hex" src="hex.png">
        </div>
        <div>
            <img class= "medIpad" src="medipad.png">
        </div>
        <div>
            <img class= "plantsLeft" src="plantsLeft.png">
        </div>

    </div>
    </div>  

</div>  

What seems to be the issue? How can it be resolved?

Answer №1

To ensure a responsive layout, employ a personalized container with a width of 100%.

.full-width-container {
  margin: 0 auto;
  width: 100%;
}

Alternatively, for a quick fix:

style="width:100%"

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

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

What causes the small black line to appear on the right side of an image when it is turned into a link?

When I turn an image into a link, why does it always seem to display a tiny black line to the right of the image? ...

Numerous toggles available for the mobile version

Hey there, I need some help! I have a footer navigation on my desktop website with 3 Ul elements. I want to turn each Ul into a toggle for the mobile version. Can anyone assist me with this? Thanks in advance! <footer class="footer"> <d ...

What is the process for activating a button after a checkbox has been selected? Additionally, how can a value be dynamically transferred from a checkbox to the rezBlock_1 block?

What could be the reason for my code not functioning properly? How can I enable a button once a checkbox is selected? Also, is there a way to dynamically move text from a checkbox to the rezBlock_1 block? CODPEN https://codepen.io/RJDio/pen/RwPgaaZ doc ...

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

I have recently learned about a rotate transform that allows for rotating around a specified center point using the `rotate(angle, centerX, centerY)` method. However, I have noticed that this method does not seem to work when applied via CSS. Interestingl ...

Is it possible to use Prettier in ESLint for formatting Markdown and CSS files?

At the moment, I have Prettier set up with ESLint using the configuration provided in my .eslintrc.json file: { "extends": ["react-app", "plugin:prettier/recommended"] } Everything works smoothly for linting and formatting JavaScript files. However, I ...

What if a website refuses to be embedded in an <IFrame>? Is there a workaround to still embed it?

I'm trying to include a 'www.youtube.com' video using the IFrame tag in HTML, but unfortunately it's not allowing me to embed it. Is there a workaround or different method I can use to achieve this? ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

Turn off slider trace animation?

Check out the slider component in MUI here: https://mui.com/material-ui/react-slider/ I'm currently exploring how to disable the animation on the nub so it moves instantly to the new position. Any advice on how to achieve this? ...

Tips on resolving issues with form input that is not accepting input on a Mobile device

As a newbie in HTML and CSS, I attempted to design a form with various fields. While the fields work perfectly on larger screens, they do not allow input on smaller screens (mobile devices). I used the Firefox inspect tool to troubleshoot the issue, but c ...

Dispense CSS using a React element

My React component index.js contains styling in style.css. I am looking to share this component on npm, but I am unsure of how to simplify the process for other developers to use the styling. After exploring different options, I have come across three ap ...

Ways to align this element in the middle

<div id="1" style="display:block"> <div class="radio"> <label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label> </div> <div class="radio"> <label>< ...

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

Choosing the Offspring: Deliberating on Multiple Children with Identical Names in Selenium

Just starting out with Selenium and web development in general, I've encountered a problem with locating an element using XPath. selenium.common.exceptions.NoSuchElementException I've been trying to troubleshoot for a while now, but haven' ...

Struggling to make addClass and removeClass function correctly for the development of the unique "15 puzzle" game

I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...

Unnecessary list elements generated by dazzling navbarPage

While developing an app with shiny using navbarPage, I noticed that there are some unwanted li tags in the HTML that are not defined in my code. Could this be a known bug? How can I go about fixing it? <nav class="navbar navbar-default navbar-stati ...

Trouble with jQuery click event on dynamically generated elements

I have a jQuery function that iterates through each element inside a specified div (#container) and triggers a JavaScript alert whenever a span is clicked. Everything functions correctly when the spans are static. However, when I include code like this: ...

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...

Implement Icon using CSS Class in jQuery Mobile

Is there a way to use an icon in jQuery Mobile on a span element and also support retina display without giving the span a fixed width? Should I attempt to utilize Media Queries to achieve this, or is there an "official way" to do it? Thanks, Nils ...

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

I am looking to create an animation where a square's stroke is drawn starting from the clicked position on a canvas. Currently, I am facing an issue where the values of variables p & q are not updating as expected when drawing the square at the click ...