Functionality of inline forms on medium-sized screens

My inline form is not aligning elements correctly on medium screens. When the screen size reaches 666px, the form splits into 4 rows as shown in this bootply.

The problem arises with the second row when the screen size is less than 660px. It only displays one element even though there is enough space for others to follow. I suspect the issue lies with the second select element taking up the entire line.

How can I ensure that the second row fills up with as many controls as the available space allows?

Answer №1

To ensure that all the elements are contained within a single div, consider consolidating them into the .main-container div.

If you want to prevent your controls from appearing in the first row, you can achieve this by setting a maximum width using max-width.

Check out this example for reference: http://www.example.com/AbcdeFgHiJk

Answer №2

There is a line 32 containing an inline style that specifies the width of the third input field. Removing it will cause a change in the form's position.

If you want to maintain this style for desktop, I recommend moving it to a CSS file and using a media query for tablet/mobile devices.

http://www.example.com/ABC123

Answer №3

To tackle this issue effectively, I have previously rearranged these elements from div containers to ul li combinations. By setting the ul to display as table-row and the li elements to display as table-cell, the width of the ul is evenly divided between them.

Subsequently, I can use media queries to specifically target the ul and adjust its layout when needed, such as spanning multiple rows or sharing a row in the display. Once the basic structure is established, I focus on fine-tuning the styling of the li elements for optimal presentation.

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 could be causing the restriction on inserting only one data entry into my MySQL database using PHP?

After inserting a single data into my database, I refresh and attempt to insert another data, but it only displays 'Unable to register! Please Try Again!'. Below is my code, can you point out the issue? <?php include "conn.php"; // establishi ...

php html mysql insert

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

javascript css reactjs material-ui

The jQuery selector seems to be ignoring elements within a different scope

I'm attempting to perform an ajax request to a specific page on my website using this particular element as a direct child of the body tag: <div class="container" id="wantme"><div class="content"></div></div> There is only on ...

javascript jquery html dom

Issue with Hover Behavior in Bootstrap 5 Navbar Dropdown

While developing a website using Bootstrap 5, I encountered an issue with the navbar dropdown not opening on hover despite attempting to add custom CSS. Strangely, the CSS code worked perfectly in isolation when I tested it in a code snippet, but failed to ...

html css visual-studio frontend bootstrap-5

Place a drop-down menu inside the input box

Struggling with this issue, I've come across various messy solutions, but I'm determined to find a cleaner one. What I'm looking for is an input field that includes a dropdown selection on the left side. This is essentially what I have in m ...

javascript css html

Using jQuery and Regular Expressions to modify the styling of the initial few words

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ...

jquery css regex

What triggers the activation of the inline formatting context in this particular scenario?

MDN provides insight about the img element in regard to styling with CSS, highlighting how images interact within an inline formatting context. The positioning of images when used in-line can be affected by vertical-align: baseline due to <img> not ...

css

Can adjusting the viewport by using touch controls alter the size of the viewing screen?

When I tried to zoom in on a webpage using touch instead of the keyboard shortcut Ctrl +, I noticed that the elements stayed the same size but the screen itself was enlarged. It seems like this method does not affect the size of the viewport. However, whe ...

html css

Does renaming a page to index.html have any impact?

After restarting my laptop, everything was back to normal. Thank you for the help and replies. The issue I'm facing is with two identical pages that have the same code. The only difference between them is the file names - index and index2. However, f ...

html css indexing

What is the proper way to nest HTML comments within one another?

This question is bothering me because I want to comment out a piece of code but it's not working as expected. Here is the code snippet:  {include file="$tpl_dir./scenes.tpl" ...

html comments

Tips for adding a class to an SVG when clicked

I want to make an SVG change color to white when clicked and its container (icon_container) to change to blue. How can I achieve this? Below is the code snippet: state = { active: false, }; click = () => { this.setState({active: !this.state.active ...

css svg

Top method for stacking several divs in a vertical line

In search of the most effective method for organizing numerous dynamically generated divs (all with identical widths) in a vertical stack, two potential solutions have emerged: Utilize float:left... Implement an unordered list and enclose each div within ...

javascript jquery css html

What is the best way to create a continuous loop of images on a never-ending

Many discussions cover similar topics, but I have not yet found a solution to my specific question. Currently, I am working on creating a model for a website and I am interested in incorporating an infinite rotating gallery with a limited number of images ...

javascript html reactjs sass flexbox

Modify the style of an element using a media query and Angular 4

Is there a way to update a class of an element based on the browser's width in my .ts file? matchMedia('(max-width: 400px)').addListener((mql => { if (mql.matches) { this.myclass = 'toggled'; } })); In the HTML, it shou ...

html angular typescript

How to Align position:relative Divs Horizontally Using CSS

My goal is to showcase content from my website located at . I want to have the ability to place this content into a designated div where I can easily center or style it as needed. The issue arises when attempting to float the content, as it doesn't fu ...

css html alignment

Steps to include a font-awesome icon within the value of an input field

I am struggling to insert a font-awesome icon into the value of an input field: The code below is just displaying the text as-is: <i class="fas fa-times"></i> <input type="submit" class="sfmdelete" name="delete" value="<i class='fa ...

html css font-awesome

How to access a variable value in an HTML attribute using .NET

This is my first time using .NET and I appreciate your patience with my lack of experience. I am attempting to dynamically change the value of the class attribute in an HTML element based on certain conditions using if/else statements: @if (item.HasAir) ...

html .net asp.net-mvc

CSSer Q&A