Tips for creating a more flexible HTML container and resizing the navbar for mobile devices

In my current HTML code, I have 3 "col-md-4" divs within a row, each with a container--wrap to fill the webpage with 3 equally sized containers. These divs are placed inside another div with class = container-fluid. When I resize the window, the containers stack on top of each other only when I make the window much smaller, about 2/3 in size. On mobile, the containers remain small and do not stack at all. How can I adjust the code to allow these containers to stack more easily and automatically on mobile devices? Additionally, the navbar on my site looks fine on mobile but remains small and collapsed. How can I make it larger on mobile?

I am looking to achieve a similar layout to cov19.cc, where the navbar is enlarged on mobile and the containers stack on top of each other rather than side by side. Any suggestions would be appreciated. Thank you!

htmlcssbootstrap-4

Answer №1

To tackle the initial issue, implement display:flex for the row. I've included a media query to ensure that when the user is on a mobile screen or the screen size is less than 991px, the containers will stack on top of each other. View it in full screen mode and resize your browser window to witness the effect. 

@media all and (max-width:991px){
 
.row{

flex-direction:column;

}
.container--wrap{
width:98vw!important;

}

}     

.row{

display:flex;

}

.container--wrap{

width:33vw;
text-align:center;
border:1px solid;
transition:all 0.3s;

}
<div class="row">
        <div class="col-md-4">
              <div class="container--wrap">
              This is one
              </div>
              </div>
        <div class="col-md-4">
              <div class="container--wrap">
              This is two
              </div>
              </div>
        <div class="col-md-4">
              <div class="container--wrap">
              This is three
              </div>
              </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

Issue with React: Caret icon in dropdown menu shifts position when page is resized to iPad or smaller dimensions

I'm facing an issue with a styled react component that has a custom dropdown menu featuring a caret icon. Whenever I test the responsiveness of the dropdown, the caret icon ends up outside the intended area. To resolve this, I've wrapped the drop ...

cssreactjscss-positionresponsivestyled-components

Detecting when users stop scrolling in Angular 5

Is there a way to toggle visibility of a div based on user scrolling behavior? I'd like the div to hide when the user scrolls and reappear once they stop. I've attempted to achieve this effect using @HostListener, but it only seems to trigger wh ...

htmlangulartypescript

Using jQuery, you can easily apply a new class to a div when it is

I'm currently facing an issue with adding a class of "active" to a div upon clicking it using jQuery. My goal is to apply the css class of active in order to give the button a distinct color (or the hover effect.) Unfortunately, I have been unsuccess ...

javascriptjquerycss

Retrieving the ID from the element that was clicked

Here is a code snippet that allows for the changing of color and text when an href link is clicked. /* Function to change the color of the button upon click */ function changeColor(element) { alert(element.target.id); if (element.innerHTML == "Selec ...

javascriptphphtml

Having trouble getting the hover effect to change the colors of CSS borders

I am experiencing difficulty in changing the background color of the 'About' button to yellow and the border color to blue when it is hovered over. Currently, only a small rectangle around the text changes to yellow on hover and I cannot figure o ...

htmlcss

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

javascripthtmlcssclassforeach

incorporate a new component in real-time

I need help with dynamically adding components to my container in AngularJS. I have a componentA that functions as a container, and I want to add multiple instances of componentB when a button is pressed. Currently, I can successfully add a single instanc ...

javascripthtmlangularjs

Make desktop view the default even when accessing from a mobile device

I have searched through all other similar questions but have not been able to find a solution. I am new to programming and am currently learning CSS. I have created a webpage with the following code: <html> <style> body { p.Welcome { ...

htmlcss

How about implementing built-in validation for Vue Headless UI Listbox (Select) element?

I need assistance in integrating native validation support into the Vue3 or Nuxt 3 Vue Headless UI Listbox (Select) component. It appears that direct support is not available, so I am looking for the best and most straightforward approach to achieve this. ...

javascripthtmlvue.jsnuxt.jsheadless-ui

Guide on adding a button to a mat-table in Angular

I am looking to add a delete button or an Angular trash icon to a mat-table in an Angular application. Can anyone guide me on how to achieve this? Here is my current table code: <mat-table #table [dataSource]="ELEMENT_DATA"> <ng-container cdk ...

javascripthtmlangularmat-table

Implementing a PHP script to prompt the user to input two random integers and sum them up on a webpage through $_POST method

My current project involves creating an interactive adding game using PHP and HTML. In this game, the user is required to guess the correct sum of two randomly generated integers. However, I am encountering an issue where each time the user submits their a ...

phphtml

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

javascriptcssnode.jsreactjsnext.js

Manipulating the DOM by linking to a div and using JSON information for opening and closing

I have retrieved data from a JSON file and displayed it as a link. I am looking to implement functionality that allows me to hide and show a div when the link is clicked. Below is the code I'm currently using: $(document).ready(function() { $ ...

jqueryhtmljsonhideshow

How can you conceal an HTML element when the user is using an iOS device?

I need the code to determine if a user is using an iOS device and, if not, hide the HTML input type "Play" button. So, I'm uncertain whether my iOS detection is correct, the hiding of the "Play" button in the code, or both: <!DOCTYPE html> < ...

javascriptjqueryioshtml

Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) However, the spacing with th ...

htmlcss

Update location when visibility changes

Looking for a way to automatically refresh an HTML page when a specific div becomes visible, but seems like I am missing something. There is a JavaScript code, divslide.js, that changes the display style of the div from none to inline at predetermined time ...

jqueryhtml

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

javascripthtmldomcode-separation

Switching image when hovering with mouse using javascript

I am working on an HTML webpage and trying to make an image change when hovering over a div, but it doesn't seem to be working. Any suggestions? <!doctype html> <html> <head> <meta charset ="UTF-8"/> &l ...

javascripthtmlonmouseover

Maintained grid column stability amidst various modifications

I have a complex 2-column grid layout, and the example shown here is just one part of it. The complete code follows a similar structure. I am looking for a way to ensure that the green box always stays close to the red box in the layout, without having a ...

csscss-grid

How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignme ...

csszurb-foundation