Flexbox's bootstrap columns display issue on smaller screens with no wrapping

I am currently working on a section of my website where I have applied some CSS to 2 divs and an anchor tag in order to center the content vertically.

However, I am facing an issue with the flex style properties when the window size is less than 768px. Instead of the layout changing to stack the columns on top of each other, they just become very thin and remain side by side. Is there a solution to this problem without resorting to table-cell formatting?

.about-us-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-nav a {
    font-size: 20px;
    color: #52361D;
    background-color: #885A31;
    border-color: #52361D;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-help-container {
    margin-top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    z-index: 2;
}
csshtmltwitter-bootstrapflexbox

Answer №1

It is important to take into account two factors:

  1. When you apply the display: flex property to an element, it transforms into a flex container with predefined styles.

    One of these default styles is flex-direction: row, which aligns flex items (child elements) horizontally. To switch to a vertical alignment, you must specify flex-direction: column.

    Another default style is flex-wrap: nowrap, which keeps flex items on a single line even if they overflow the container.

    In response to your query:

    The issue seems to be that when using flex properties, smaller window sizes (<768px) should cause the layout to change and each col-md-4 element should stack vertically. However, this is not occurring; instead, the columns shrink and remain side by side.

    It appears that the flex items are not wrapping as intended. Try adding the following to the flex container:

    flex-wrap: wrap;

  2. If you wish for the flex items to stack vertically when the window size is less than 768px, utilize a media query with the flex-direction property.

    @media screen and (max-width: 768px) { .your-selector-here {flex-direction: column;} }

Additional note on browser compatibility:

Flexbox is compatible with most major browsers, excluding IE versions lower than 10. Some newer browser versions like Safari 8 and IE10 require vendor prefixes. For easy prefixing, consider using Autoprefixer. More information can be found in this answer.

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

What is the best way to relocate the box within this HTML/CSS document?

Looking at this specific HTML webpage <html> <head> <title>CSS Structure</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">Header 900x100 px</div> ...

csshtml

I'm seeking answers on selenium and the proper use of CSS selectors, as well as troubleshooting the error message 'selenium.common.exceptions.ElementClickInterceptedException'

After some research, I think I have a grasp on CSS selectors and their appearance. However, when using selenium, how can I locate a CSS selector on a website and then click on it? The correct syntax eludes me. I encountered this error as well: selenium.co ...

pythonhtmlcsspython-3.xselenium

polygon with five or more sides

Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...

csshtml

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

I'm working with a table that has 7 rows and 2 tabs for Sunday and Monday. The row corresponding to the current time is highlighted in red. I wanted to know if it's possible to add the following <marquee>My first Row</marquee> effe ...

javascriptjqueryhtml

I want to utilize a select drop-down menu for navigating between pages in my pagination, breaking away from the traditional method of using <a> tags

I have a select dropdown that is dynamically generated for navigation to other pages within the script. It lists the number of pages available for navigation. However, after selecting a page and loading it, the dropdown does not stay selected. I've tr ...

javascriptphphtmljquery

The body's width is more compact compared to one of my containers in HTML/CSS

After completing my code for a beginner's HTML/CSS project, I realized that the main parent container holding two smaller containers needed to be set at specific widths. The two inner containers had to be exactly 650px and 270px wide, while the main p ...

htmlcss

How to retrieve an anchor element from a list using JavaScript

My current code loops through each <li> within a <td> cell and adds a class to the <li>. I have now inserted <a> tags between each <li> and am facing challenges in accessing the <a> tags. What I actually want is to assig ...

javascripthtmliteration

Unforeseen Issues Arising from Media Queries

Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of the CSS: @media only screen and ( ...

htmlcsstwitter-bootstrap

The code "transform: rotate(' ')" does not seem to be functioning properly in Javascript

I set out to create a simple spin wheel exercise, but it quickly became more challenging than I anticipated. After researching how to make one online, I found code similar to mine that worked on a JSFiddle Example, yet my own code still didn't work. ...

javascripthtmlcss

Unique lightbox effect with multiple layers

Currently, I am working on implementing a lightbox effect to showcase images to the user using a GridView. Upon clicking an image, a new layer should appear above the current page displaying a larger version of the image along with some description. Althou ...

jqueryhtmlcss

Preventing HTML form from being resubmitted upon page refresh after submission

I am facing an issue with my HTML form. Whenever I click submit, the form data is sent to the same php page. However, after submitting, when I refresh the page, the web browser shows a re-submission dialog. How can I prevent the form from submitting again ...

phpjqueryhtml

Centering Vertical Tabs Using HTML and CSS

I followed a vertical tab tutorial on W3Schools and would like to implement it on my website. However, I am having trouble centering the tabs after reducing their width sizes. I have attempted adding div tags to the code and aligning them to the center wit ...

htmlcss

Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn&ap ...

htmlcss

Modify the color of the H1 tag exclusively within specific classes

Struggling with a formatting issue here. I'm looking to customize the colors of h1, h2, h3... when they are inside specific classes. It's mostly working as intended, however, the problem arises when the headings outside of those classes don' ...

htmlcss

When utilizing ThreeJS video texture, it is necessary to ensure that CORS headers are included, regardless of whether the <video> tag typically requires it or

I am facing an issue with my localhost web server where a remote video from Firestore Storage is being played on a page using a <video> tag. The video plays correctly on the web page. However, I am now trying to use the same video as a texture in a T ...

htmlvideothree.jscorsfirebase-storage

Adjust the height of a div element back to its original size using jQuery after it

My goal was to create a dynamic div that expands when the user clicks on it, revealing more information. I have successfully achieved this functionality. However, my next objective is to modify the script so that the height of the div changes back when the ...

jqueryhtmlresize

scalable and circular picture displayed within a bootstrap-5 card

Is there a way to resize and round the image within a bootstrap-5 card? I am unsure of how to achieve this using either bootstrap-5 or css3. My goal is to have the image appear smaller and rounded in the center of the card. Sample Code: < ...

cssbootstrap-5

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to ...

javascriptcsshtml

The issue with the search box not being correctly displayed on Google CSE using Twitter Bootstrap

Having an issue with the Google Custom Search (CSE) as it is not displaying the search box and button correctly. I am using Twitter Bootstrap v3.1.0. <script> (function() { var cx = '009077552906670546181:2ufng0dmsos'; ...

jquerycsstwitter-bootstrapgoogle-custom-search

What is the best method for showcasing two images side by side in a column layout?

I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth. Img1 Img2 Img3 Img4 This is my code: <section id="content"> <div class="content-wrap"> <div class="container clearfix "& ...

htmlcssangularjstwitter-bootstrap