problem with html tags

I've been attempting to customize an input field using inline styles, but I'm running into issues.

Here's what I tried:

<div class="row vh-md-100">
      <div class="col-md-7 my-md-auto text-center text-md-left">
        <h1 class="display-3 text-white font-weight-bold">Div</h1>
        <p class="lead text-light my-4">Div</p>
        <input style="width:1;" width="1" placeholder="What is your best email">
        <a href="#signup" class="btn btn-primary page-scroll">send</a>
      </div>
    </div>

I expected the width of the input field to change based on the style I added, but it doesn't seem to be working. Can someone point out what I might be missing?

htmlcss

Answer №1

The reason it's not working is because you forgot to specify a unit for the width.

When you wrote width: 1, it needs to be clear what unit of measurement you're using such as cm, px, or em. Make sure to specify the unit in your code.

Referencing the documentation from the link provided, you'll find a comprehensive list of all acceptable units. The only exception where a number can stand alone without a unit is when it's 0.

<div class="row vh-md-100">
  <div class="col-md-7 my-md-auto text-center text-md-left">
    <h1 class="display-3 text-white font-weight-bold">Div</h1>
    <p class="lead text-light my-4">Div</p>
    <input  style="width:1px;" width="1" placeholder="What is your best email">
    <a href="#signup" class="btn btn-primary page-scroll">send</a>
  </div>
</div>

Answer №2

Make sure to include a unit. Consider trying 1px as the unit. Refer below

<div class="row vh-md-100">
                    <div class="col-md-7 my-md-auto text-center text-md-left">
                        <h1 class="display-3 text-white font-weight-bold">Div</h1>
                        <p class="lead text-light my-4">Div</p>
                        <input  style="width:1px;" placeholder="What is your best email">
                        <a href="#signup" class="btn btn-primary page-scroll">send</a>
                    </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

Limiting the number of characters in PHP/MySQL

Here is a glimpse into the scenario I am currently facing: The content, including the heading, text, and image, is all dynamically generated based on user input. Users have the option to include an image and choose the text for both the heading and main c ...

phpmysqlcssdynamiclimit

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

htmlangulartypescriptfilterangular-material

The origin of the image is specified within the HTML document

I recently encountered an issue while trying to include images in my HTML file. When I used a local file path like background-image: url('file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg'), the image displayed correctly. However, when I tri ...

javascripthtmlcssimagedom

Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll wh ...

cssflexboxoverflow

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Currently, I am testing a JQuery Mobile webpage that features a simple list setup: Upon clicking the list items, they get highlighted and their ids are saved in a local array. Is there an easy (or not so easy) way to transition the selected elements slidi ...

javascriptjqueryhtmljquery-mobile

The Bootstrap carousel indicators are not automatically switching because they are placed outside of the main div

I have integrated the latest Bootstrap framework into my website, featuring a visually appealing carousel. The unique aspect of my carousel design is that the indicators are positioned outside the main carousel div. Here is a snippet of my carousel code: ...

jqueryhtmlcsstwitter-bootstrapcarousel

Materialize.css | managing spaces, indentation, and 'overriding' in a span element

I recently started using a new framework called Materialize CSS for my project and I'm still getting the hang of it. One issue I've encountered is that long texts in my sidebar are creating large spaces between line breaks and strange indents. D ...

jqueryhtmlcssmaterialize

Tips for automatically selecting the state from a dropdown list when utilizing address autofill

I created an HTML form and noticed that Chrome's autofill feature successfully fills in the street address, city, and zip code. However, when I use a select/option dropdown list for the state input, it does not get auto-filled. I have tried using sta ...

htmlautofillstreet-address

Changing the text color of an active button in Bootstrap

Hello everyone, I've been struggling to find a solution to my issue and I could really use some help. The problem I'm facing is changing the text color of the active button in Bootstrap. Specifically, after clicking on a button, I want it to tra ...

htmlcsstwitter-bootstrap

Ensure that the height of the div matches the height of the background image

Although I've seen similar questions before, none of the solutions seem to be effective in my case. In this scenario, there's a div class that has a background image set up: #index-box{ border-radius: 20px; background: url('/stati ...

htmlcssbootstrap-4

How can we add styles to text entered into a form input field in a targeted way?

Is there a way to apply styling to the second word entered into a form input text field after the user hits "enter" and the data is output? In this scenario, the text always follows the format of 3 numbers, followed by a space, and then a name. For examp ...

javascriptjqueryhtmlcssforms

Challenge with Alignment of Fields in Bootstrap's Horizontal Form

I am working on an Angular project with a horizontal form using Bootstrap. I have encountered a slight alignment issue with one of the date fields. The IsMessedUp datepicker input field is not aligned properly, positioned slightly to the left compared to t ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

htmlcssimage

JavaScript date input formatting with HTML

When using the input date picker in HTML, the default format displayed is MM-DD-YYYY. <input type="date" id="gdatum" /> Is there any method to change the mask to DD-MM-YYYY? ...

javascripthtmldatedatepicker

The execution of Javascript should be limited to when the tab or browser window is in focus

Similar Question: Detect If Browser Tab Has Focus I have developed a basic Java applet that is capable of capturing a client's screen. By using a small piece of JavaScript code, I can initiate the applet and capture the active screen image. Howe ...

javascriptjqueryhtml

What is the best way to click on the third div class "link" using Selenium when they all have the same div class?

While working with selenium and python, I encountered a scenario where all the HTML elements have the same class "links". There are seven links on the page, each sharing the same class and similar name. I am seeking guidance on how to interact with these w ...

htmlpython-3.xseleniumclick

Replace the pixel measurements with percentage values

I have a vision for creating a dynamic full-width slider using a flex-wrapper and multiple child sections. Each section spans the width of the viewport and is aligned in a row. The goal is to move the flex-wrapper by 100% margin-left every time a button ...

jquerycss

Adjust the sizing of all fonts following the switch in font styles

Seeking help for adjusting font-size across a responsive web page design using different font families. font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; To achieve responsiveness, various media queries were applie ...

javascriptjquerycssfontsfont-size

Get the content from a webpage, find and calculate the total count of div elements with a specific class, and display that number

Greetings everyone, I've run into a bit of a roadblock. My goal is to create a basic script that can count the number of servers currently running on this map by scraping the webpage, calculating the divs with the class ".row ark_srv1", and then displ ...

phphtmldomdocument