The Bootstrap grid with 2x2 layout reaches a maximum size horizontally

I am facing an issue with my layout design. I am trying to create a menu that consists of a header and a 2x2 tile grid, which should transform into a 1x4 grid on smaller screens.

Objective - Large screen (Red = Header, Green = Tile)

On smaller screens, the layout displays the header bar and the 4 tiles below it as intended:

Objective and current state - Small screen

However, when I resize the screen to make it larger, the grid transforms into a 2x2 layout. But further increasing the screen size causes the grid to stop expanding horizontally, resulting in the following output:

Current state - Large screen


HTML

<div class="overlay-content" id="container-fluid">
    <div class="row">
        <div class="tile col-md-6 border">
            <a href="#">asdf</a>
         </div>
         <div class="tile col-md-6 border">
             <a href="#">asfd</a>
         </div>                
         <div class="tile col-md-6 border">
             <a href="#">asdf</a>
         </div>
         <div class="tile col-md-6 border">
             <a href="#">asdf</a>
         </div> 
     </div>
 </div>

CSS

.overlay {    
    height: 100%;
    width: 100%;    
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
}

.overlay-header{    
    border:10px;
    font-family:fontNavbar;
    filter: invert(100%);
}

.overlay-content {
    position: absolute;
    height: 100%;
    text-align: center;
    display:flex;
}

Can someone advise on what I might be missing in my code? Your help is much appreciated!

Answer №1

If the columns are not filling up to the full 50% width due to lack of content, you can apply the following CSS adjustments (also changing the container-fluid ID to a class):

.overlay-content.container-fluid,
.overlay-content.container-fluid > .row {
    width: 100%;
}

https://jsfiddle.net/2a6w3sve/

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

I have multiple div containers on my webpage, and I'm looking for a way to dynamically load data into a specific div without having to refresh the entire page using PHP and Code

Is there a way to load data into only the second div tag when clicking on a link, without refreshing the entire page? I want to ensure that the first and third div tags remain static while allowing the second div tag to be dynamic. <div class="first" ...

Understanding the Contrast between Relative Paths and Absolute Paths in JavaScript

Seeking clarification on a key topic, Based on my understanding, two distinct paths exist: relative and absolute. Stricly relative: <img src="kitten.png"/> Fully absolute: <img src="http://www.foo.com/images/kitten.png"> What sets apart R ...

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

Utilize Sass @extend to incorporate imported CSS files in the build process

In my development setup, I have a global CSS file that houses all of the generic CSS styles. My goal is to extend the classes from this global CSS file in any of my SCSS files. However, when I attempt to do so, I encounter an error stating that the .xyz c ...

When submitting a form in HTML, ensure that the input checkbox returns 'On' instead of 'True'

My MVC3 app is using Project Awesome from http://awesome.codeplex.com/, but I'm encountering a strange issue with checkboxes. Inside a Modal popup, I have the following simple Html code: <input type="checkbox" class="check-box" name="IsDeleted"> ...

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

Guide to activating the submit button when a radio button is selected

Here is the code snippet for an edit form <form [formGroup]="editForm" (ngSubmit)="saveUser()" novalidate> <div class="form-group"> <label class="block">Gender</label> <div class="clip-radio radio-primary"> &l ...

Transforming the MUI CircularProgress into a half circle shape

After utilizing CirculaProgress, I was able to achieve the following: https://i.sstatic.net/Y0Seo.png Is there a simple method to transform it into a semicircle like shown here? https://i.sstatic.net/D8bKu.png ...

Display or conceal a div based on the input value

Displaying div#cool should be triggered when the user enters the term "cool" into the input field. Similarly, showing div#good should be activated when the user types "good", and this functionality should operate seamlessly in real-time. ...

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

How to Create Indentation Without Adding a New Line in Handlebars Mustache Syntax?

Trying to format mustache code for readability, I encountered an issue: {{this.$.Name}} {{this.$.Name}} although the desired output is: namename Is it possible to achieve this format without losing indentation in the .hbs file? ...

Trouble arises when adding HTML elements to a Content Editable Div. Any text inputted after programmatically inserting HTML content will merge with the last HTML tag instead

https://i.sstatic.net/bKIVm.pngI am currently working on a project that involves creating message templates within an app. Users have the ability to add placeholders for fields like names to these templates by clicking a button. They can also remove these ...

Iframe overlay feature functioning on Chrome but not on IE11

I have a Document viewer with a .less file containing the following styling: div.document-previewer-container { //height: 400px; //width: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; //padding: 5px 2px; > div.document-preview { h ...

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

Parsing of CSS and Javascript is disabled within iframes

Within my node.js application, I have configured an endpoint where I can load some parsed HTML code. This is achieved through the following code: app.get('/code', function (req, res) { res.setHeader('Content-Type', 'text/html& ...

occupy the full width of the available screen space (from one end of the container to the other

Currently, I am utilizing the Flexbox enabled version of Bootstrap 4 Alpha 3. Check it out on Jsfiddle body { background-color: lightgreen; } [class^="col"] { background: gold; border: 1px solid tomato; } <link href="https://cask.scotch.io/boo ...

Loop through the numbers entered into a table field

<table id="Container1Details" cellspacing="15"> <tbody> <tr> <td align="right"> <input name="acidity" type="number" maxlength="4" id="acidity" min="0.112" max="0.152" step="0.001" style= ...

AngularJS provides the ability to use cookies when working with an EventSource

I'm exploring the idea of using EventSource to send server events to the client, but I want the client to be able to distinguish itself so it only receives its own events. I've been attempting to utilize cookies for this purpose, but for some rea ...

Is there a way to insert a button within a table that will allow me to easily insert new rows and columns?

<head> No content available at the moment. <!-- Here is my code --> <h1>Reserve Your Hall Form</h1> <form class="form-horizontal"> <table class="form-group table table-bordered table-hover"> ...