The element's width set to 100% is not functioning properly when used within a container

Struggling to create a full-width image header but the image always ends up being the width of the container, not 100%. Tried various solutions without success, and the suggested answer here did not solve the issue. Modifying the .container width in custom CSS might work but could potentially disrupt the entire site design.

Snippet of the code:

<body style="background-color: #eee">

    <div class='container-fluid'>

        <div class="row" style='width: 100%'> 
            <div class='' style='height: 10px; margin: 0; padding: 0; width:100%'>        
                <img class='' src="images/shape1.png" style='height: 100%; width:100%; margin-bottom: 13px'>               
            </div>
        </div>

        <div class='row text-center rowStyle'>

            <img id='leftLogo' src="images/kslogo.png">
            <img id='rightLogo' src="images/kglogo.png">

            <div class='searchContainer'>
                <table class='table-responsive searchTable'>
                    <tr>
                        <td width='15%'>
                            <img class='searchButton' src="images/btn-search.png">
                        </td>
                        <td width='85%'>
                            <input type='text' class="form-control searchInput">
                        </td>
                    </tr>
                </table>                                    
            </div>     

            <div class="row" style="margin-top: 40px; margin-left: auto !important; margin-right: auto !important; width: 76%">
                <div class="text-center col-md-4 items">
                    <img src='images/btnlog-in.png' class='buttonsLocation'>
                    <img class="" src="images/Aricles03.png" alt="Generic placeholder image">        
                </div><!-- /.col-lg-4 -->
                <div class="text-center col-md-4 items">
                    <img src='images/btnlog-in.png' class='buttonsLocation'>
                    <img class="" src="images/Aricles01.png" alt="Generic placeholder image">
                </div><!-- /.col-lg-4 -->
                <div class="text-center col-md-4 items" style='position: relative;'>
                    <img src='images/btnlog-in.png' class='buttonsLocation'>
                    <img class="" src="images/Aricles02.png" style=''>
                </div><!-- /.col-lg-4 -->
            </div><!-- /.row -->

        </div>
    </div>

    <div style='height: 80px; margin-top: 84px; padding: 0; width: 100%; background-color: #e3e3e3;'>

    </div>

</body>

EDIT: Included full code and screenshot

Using Bootstrap 3 for this project.

Any assistance or suggestions would be greatly appreciated. Thank you.

csshtmltwitter-bootstraptwitter-bootstrap-3

Answer №1

Is it possible that you accidentally left the "

<div class='container-fluid'>
" tag unclosed?

Answer №2

In the .container-fluid class, the padding on the left and right is specified as 15px. If this padding isn't necessary, you can simply override it with your own styling.

Answer №3

Give it a shot:

    <div class="container-fluid">

        <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 10px; padding-left: 0; padding-right: 0;">        
                <img src="images/shape2.png" style="height: 100%; width:100%; margin-bottom: 13px">               
            </div>
        </div>

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

Creating individual components for <select> and <option> elements in ReactJS

I am uncertain about how references function when the select and option tags are used together. When I split them into separate React components, they stop working. How can I resolve this issue? Here is a basic example: <select> {() => ( ...

javascripthtmlreactjs

I have created a textbox with a button, but I am unsure of how to delete it

var emailFields = document.getElementById('emails'), addLinkButton = document.createElement('a'), fieldTemplate = emailFields.getElementsByTagName('div'), currentFieldCount = fieldTemplate.length, maxFields ...

javascripthtml

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

javascripthtmlangularjschart.js

Attempting to limit entry to a pathway when the loggedIn criterion is satisfied

I am currently facing a challenge with restricting access to the login page if the user is already logged in. I have been attempting to achieve this by checking for an existing token in the localStorage. Do you have any suggestions on how I can troublesh ...

phphtmllaravelvue.jsvuejs2

Command Internet Explorer 9 to disregard media queries and instead adhere to the minimum width rule

Is there a way to prevent IE9 from recognizing media queries or following min-width? I have created a responsive design for mobile devices using media queries on my website, and they function perfectly in modern browsers. However, some users still use old ...

css

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

My JSON data structure looks like this: { "fID": "00202020243123", "name": "John Doe", "List": ["Father", "Brother", "Cousin"] } When I render this JSON element in my model and view it in the HTML, everything works fine. However, when I try t ...

javascriptjqueryhtmljsonhtml-lists

Ways to eliminate whitespace in React and Bootstrap 5

I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance? Here is how the page looks on PC: https://i.sstatic.n ...

cssreactjsbootstrap-5react-bootstrap

When viewing my project on GitHub pages, the images within the card are not appearing

After running my project page link at https://nayaksofia.github.io/RestaurantReviewTest1/, I've noticed that the images inside the card are not displaying. However, when I run the same project on my local server localhost:8000, the images appear just ...

javascripthtmles6-promiseservice-workerangular-service-worker

Create a toggle effect using attribute selectors in CSS and JavaScript

I am looking to switch the "fill: #000;" from the CSS property "svg [id^='_']". Usually, I would use a method like this, but it seems that I can't do so because "svg [id^='_']" is not an element, correct? pub.toggleClass = functi ...

javascriptcsssvg

Randomly positioning an image while the page is loading

I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...

javascriptjqueryhtmlcsscoffeescript

Learn how you can efficiently send a JSON response to an AJAX call by utilizing a serialized object along with HTML generated from the Html

Using C# and MVC, I am working on responding to an ajax call triggered by Jquery. My goal is to send back an object that includes a List<int> as well as some HTML code generated using a HtmlHelperExtension that I developed. Previously, I was only se ...

c#htmlajaxjsonhtml-helper

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

javascriptjqueryhtmlcss

The Unit Test for Angular NgRx is not passing as expected

I'm facing difficulties with my unit tests failing. How can I verify that my asynchronous condition is met after a store dispatch? There are 3 specific checks I want to perform: 1/ Ensure that my component is truthy after the dispatch (when the cond ...

htmlangulartypescriptunit-testingngrx

Displaying PHP errors in input fields

I have noticed that this particular code is functioning correctly. However, I am wondering why I receive an error when I remove the foreach loop ($rows as $row). Is there a method to display the data without utilizing it? <?php require("coneccion.php ...

phphtmlcss

Why isn't the tooltip function functioning properly in Bootstrap 5 beta1 when using an SVG image?

Currently, I am utilizing Bootstrap 5 beta1. However, I have encountered an issue. When I use a tooltip with a button, it works fine. But if I use a tooltip with an icon (svg, feather icon), it doesn't work. In other instances, when I use a tooltip ...

javascriptjquerytwitter-bootstrapsvgbootstrap-5

Click on the logo to return to the home page

Logo Link Causing Menu Alignment Issue After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyon ...

htmlcsshyperlink

Tips for integrating CSS with Material UI TableContainer

I have utilized Material UI Grid to display data in a chart. However, the appearance of the chart does not match my expectations. Instead of resembling the desired "dense table," it looks different: Actual Look of the Chart Below is the code snippet I ha ...

javascriptcssmaterial-uinext.js

transferring a PHP object between two PHP files containing HTML code

profiles_information.php I am working with a PHP document that receives information from Ajax and sets it as attributes to an object of the Profile class. I have created HTML to display a table, where users can click on "Add" to send the object to add_to_ ...

phphtmlajax

Audio Playlists and Dynamic Loading with WordPress Shortcode

I'm looking to incorporate the wp_audio_shortcode() function using AJAX, and then customize the style of the audio player. However, I'm facing an issue where the HTML code returned by the AJAX request does not allow me to customize the audio play ...

javascriptphphtmlajaxwordpress

Automatically, the "ng-hide" class gets added despite using the correct syntax for ng-show

I am trying to dynamically show/hide a tr tag within a table based on the value of a scope variable in the controller. Despite writing the code correctly, I am facing an issue where the "ng-hide" class is automatically added to the tr tag every time it is ...

javascriptjqueryangularjshtmlcss