What could be the reason for the lack of responsiveness in my input box?

http://jsfiddle.net/4ws3L6kn/1/

Can anyone help me figure out why this isn't responsive? What mistake did I make?

<div id="DIV_1">
    <div id="DIV_2">
        <div id="DIV_3">

            <button id="BUTTON_4">
                <span id="SPAN_5"></span>
            </button> 
            <button id="BUTTON_6">
                <span id="SPAN_7"></span>
            </button>
        </div>
        <input type="text" placeholder="Your message..." id="INPUT_8" />
        <div id="DIV_9">

            <button id="BUTTON_10">
                Send
            </button>
        </div>
    </div>
</div>

Answer №1

experiment with modifying your input style using the following

INPUT_8 {width: 90%;}

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 are the steps to create a scrolling effect for the menu buttons on the mobile version of

When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...

Tips for creating a full-screen first page while keeping the others standard

Looking to create a dynamic HTML5/CSS/JS Website where the first page always displays in fullscreen mode with a background image, while the subsequent pages appear in a normal layout. Here's an example of what I'm aiming for: I've created ...

Click on the link or tab to update the marker location on the Google Map

Can you click on Tab 2 to change the marker/location, and then go back to Tab 1 to switch it back to the original location? [Links to Fiddle] http://jsfiddle.net/ye3x8/ function initialize() { var styles = [{ stylers: [{ saturati ...

Guide on how to save the selected user option in a PHP form

I'm having trouble getting the form to automatically set itself based on the state selected by the user from a drop-down menu of 50 states. The user's info, including their chosen state, is stored in an info array with $state. Everything else dis ...

Unable to avoid IE8 warning about reposting using client-side code

When using asp.net webforms, every server control generates a post request when clicked. If you try to reload the page with F5 or Ctrl+R after that request, the browser will show a re-post warning by default. In an attempt to avoid this behavior in IE 7-* ...

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

What is the best way to conceal the jqgrid entirely while it is still loading?

Having an issue with my jqgrid. As I load the table and fetch a large amount of data from the database, the loading process naturally takes a few seconds. However, during this time, I can see the column headers without any rows or styles applied to the jqg ...

How can I apply bold styling to primary nodes in jsTree using CSS?

I am currently utilizing the in conjunction with asp.net mvc. My objective is to apply bold styling to the text using CSS within the main nodes, specifically those with arrows (refer to the image below). https://i.sstatic.net/xg3uF.png Below is the code ...

Analyzing the audio frequency of a song from an mp3 file with the help of HTML5 web audio API

Currently, I am utilizing the capabilities of the HTML5 web audio API to detect when a song's average sound frequency drops below a specific threshold and create corresponding markers. Although I have successfully implemented this using AudioNodes, th ...

Difficulty with NodeJS, Hapi, and Cascading Style Sheets

I've decided to challenge myself by creating a small webhost using Node.js with hapi. Even though I'm not an expert in Node.js, I am eager to learn as much as possible. Currently, my main issue revolves around fetching a CSS file from an include ...

Requesting HTML content from a PHP file using JQuery Ajax callback

For an ajax request, I am entering a name in an input box to search for data from a database. Everything is functioning properly. <script> $(document).ready(function(){ $('input#name-submit').on('click', function() { ...

Identifying the accurate folder for file uploads

In my project directory, I have a folder named uploads, along with two files called upload.html and upload.php. The relevant part of my upload.html file looks like this: $(document).ready(function(){ $("#pictureUploadSubmit").submit(function(event) { ...

"Clicking on the hamburger menu causes the webpage to reset its scroll

I recently integrated a mobile hamburger menu into my website, which is primarily built around a single page. However, I noticed that whenever I open the menu, it automatically scrolls to the top of the page regardless of where you were previously scrollin ...

Incorporating a PHP line into a CSS file that is dynamically generated by PHP code

Struggling with adding a get_template_directory_uri() in a CSS line located in a boxes.php file. $box_first = 'linear-gradient(rgba(0, 175, 227, .8), rgba(0, 175, 227, .8)), url("/wp/wp-content/themes/my_theme/inc/img/boxes/box2.png") center ...

What is the best way to generate a table with continuously updating content?

If the user input : $sgl = 2; $dbl = 0; $twn = 1; $trp = 0; $quad = 0; $price_room = 250000; I want the result looks like the picture below : https://i.sstatic.net/iQYqr.jpg I have tried the following code : <?php $sgl = 2; $dbl = 0; ...

You can submit a photo to a form as an attached file

I had a code that looked like this My goal is to simplify the process for users by allowing them to fill out additional information in a form without having to upload an image separately. I want to display the canvas image from the previous page in the fo ...

What is the process for implementing custom CSS styles in Cognos?

I've been working on creating Cognos reports and I'm looking to change the overall design of some specific ones (prompt pages and report pages). Is there a way for me to use different custom CSS files for each individual report? If that's ...

Creating a JavaScript function triggered by a click event that will redirect to

I'm attempting to create an onclick function that will redirect you to a new page when you click on a div element, much like the A + href attribute in HTML. Any suggestions on how to achieve this? Should I just add an A tag inside the div? I'm un ...

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

The CSS :lang() selector targets elements within documents that do not specify a particular language

Can elements that do not have a language set or inherited, meaning they are in an unspecified ("unknown") language, be targeted? Facts The language of an HTML document or element can be specified using the HTML lang attribute, for example: <html lang=& ...