Achieving a 100% width input with Flexbox: Tips and tricks for success

Check out this flexbox form I created using bootstrap 4:

https://jsfiddle.net/kkt0k2bs/1/

I have implemented a media query to adjust the form elements for smaller screens.

For larger displays, I want the form items to be displayed inline. However, on smaller screens, I prefer the form elements to stack vertically and occupy 100% width.

The issue I am facing is that the input field does not expand to 100% width on smaller screens. How can I modify the code to ensure the width is set to 100% on smaller displays?

HTML:

<div class="form-mod">
        <form class="form-inline justify-content-center d-inline-flex">
            <div class="form-group">
                <div>
                    <input type="text" name="email" value="" placeholder="Enter your email..." class="form-control">
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Request an Invite</button>
            </div>
        </form>
</div>

CSS:

.form-mod {
  display: inline-block;
  text-align: center;
  padding: 16px 32px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3;
  box-shadow: 0 20px 63px 0 rgba(0,0,0,.6);

  [type="text"] {
    width: 260px;
    margin-right: 16px;
    border-radius: 100px;
    padding-left: 18px;
    border-radius: $border-radius;
    font-size: 16px;
  }

  @include media-breakpoint-down(sm) {
    .form-group {
      width: 100%;
    }
    [type="text"] {
      width: 100%;
      margin: 0 0 16px 0;
      display: block;
    }
    opacity: .5;
  }
}

Answer №1

Include the following snippet in your code:

.form-group {
  flex: 1 0 auto;
}

updated example

This CSS property instructs flex items to distribute space evenly when displayed on the same line.

However, if they move onto separate lines, each item will expand to fill all available space.

Answer №2

It seems that the issue lies with your

.form-mod { display: inline-block; }
style declaration. To address this, consider implementing a media query specifically for smaller screens to change the display property to block.

// Custom styling for small devices (landscape phones, 34em and larger)
@media (min-width: 34em) { 
  .form-mod {
    display: block;
  }
}

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

Exploring how to retrieve time using PHP and JavaScript

When displaying a date in php or javascript, what factors influence the calculation? Is it dependent on the user's computer time settings, or is it sourced externally? If the user has control over it, how can I ensure my code accurately retrieves the ...

Tips for increasing the width of a button within an HTML table heading

I'm attempting to make a button within a table <th> expand to the full width and height of the header column, even if a table cell in the same column is larger than the text. If I set the width to 100% in CSS, the button ends up matching the siz ...

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

A helpful tip for dynamically adjusting the canvas size is to utilize its height and width attributes to resize it whenever it undergoes a change

I am encountering an issue with the canvas element in my code. The canvas is supposed to update whenever its containing div is resized. window.addEventListener('resize',function() { let mapwidth = $('.canvas').attr("width") l ...

What is the most effective way to align a thumb to the left and content to the right?

What is considered the optimal method for positioning an image to the left with two text fields to the right of it? Is using floats or positioning better? <li> <a href=""> <img src=""THUMB HERE /> </a> <a href=""> TITLE </ ...

Glitch with AngularJS Bootstrap date picker

Currently, I am working on integrating a datepicker into my PhoneGap application using Angular UI Bootstrap. <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" cl ...

The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification: https://i.sstatic.net/HXdhq.png .panel-booking .panel-body { pad ...

What are the advantages of going the extra mile to ensure cross-browser compatibility?

It's fascinating how much effort is required to ensure web applications work seamlessly across all browsers. Despite global standards like those set by W3C, the development and testing process can be quite laborious. I'm curious why all browsers ...

Text alignment from the lower edge

Imagine having a title inside an image, positioned near the bottom with a negative margin-top. The issue arises when the text orientation expands from top to bottom as more content is added. Is there a way to reverse this, so that the text div grows toward ...

Trigger a series of functions upon clicking with ReactJS

Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...

Blog entries alternating between a pair of distinct hues

I want to create a design where each post container has a different color from the one next to it. Essentially, I would like the containers to alternate between two distinct colors. The left side shows how it currently appears, while the right side depict ...

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Struggling to understand why there is a blank space between the image and the menu. Here is the HTML and CSS related to it: <header class="header_nav"> <img src="img/logo.png" class="logo"/> <nav class="nav_bar"> <u ...

Table featuring alternating background colors for rows and a distinct header design

Incorporating CSS, I have managed to style my rows in alternating colors. Take a look at the code snippet below: Fiddle tr:nth-child(odd) td { background-color:red; } tr:nth-child(even) td { background-color:blue; } tr th { background-color: yellow} ...

Issue with cursor behavior in contenteditable field on Chrome

Recently, I encountered an issue where the cursor would jump to the wrong place when a user clicked inside a contenteditable div, but not directly on the text. This problem seems to be isolated to newer versions of Chrome and Opera. Interestingly, when I t ...

The alignment of inline-block elements is not being maintained on the same line

Here's a question I have about my embedded form. Why does the display property of inline-block make the "submit" and "terms" elements appear higher than the email field? And more importantly, how can I fix this issue? I've attempted to use the t ...

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

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 ...

How can I incorporate margins or adjust scaling within dompdf?

After creating a PDF using dompdf with the paper size set to A6, I am experiencing issues when trying to print it on A4 and letter paper sizes. The left and top borders are being cut off. Is there a way to generate a PDF that is compatible with A4, A6, l ...

Alter the border hue of the checkbox and radio button

Is there a way to modify the border color of checkboxes and radio buttons (both circle and rectangle) using CSS? I've attempted several methods with no success. Can someone provide guidance on this? Any advice would be greatly appreciated. Thank you ...