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

Exploring the Depths of the Internet: Uncovering Data with BeautifulSoup

I am currently working on extracting the rain chance and temperature/wind speed data for each baseball game from rotowire.com. My goal is to organize this data into three columns - rain, temperature, and wind. I have made some progress with the help of ano ...

pythonhtmlweb-scrapingbeautifulsoup

Swapping out LinkButtons using jQuery

[EXPLANATION] (apologies for the length) In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new ...

jqueryasp.netcss

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

htmlcss

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

Access the freshly launched URL

I am relatively new to PHP and have a table displayed on my webpage. Each row in the table has an auto-incremented rowid that is not being displayed. When clicking on a row, it opens a new page in the format of www.newpage.com/newpage/rowid. If I inspect ...

phphtmlurlseleniumrows

Encountering an "unexpected token" error while utilizing the JSOP API in a ReactJS application

I am facing an issue while fetching data from a JSON API, as it is throwing an "Unexpected token" error. Below is the code that I have tried so far. Any help in resolving this problem would be greatly appreciated. Below is the code snippet: var Demo = Re ...

javascripthtmljsonreactjs

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

For mobile, I utilized the :hover and :active pseudo-classes to create a transition effect when tapping on a tab that enlarges the elements for more information. However, I am seeking a way for the activated element to return to its original state after a ...

csshover

Exploring ways to validate the existence of a class in HTML table elements

If I want to verify if each element has a specific class when creating tables and clicking on the corresponding cells above them, This is what I have tried. However, it did not work as expected. How can I make this work correctly? What am I missing her ...

javascriptjqueryhtmlcss

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...

javascriptjqueryhtml

Is it possible to customize the color of an SVG image within Next.js using next/image?

import Image from 'next/image' ... <Image src="/emotion.svg" alt="emtion" width={50} height={50} /> I am trying to change the color of the SVG using next/image. However, applying the following CSS rule does not seem ...

cssreactjsnext.jsstyled-componentsnextjs-image

Exporting MySQL data to MS Excel is functioning smoothly on the local environment, however, it is encountering difficulties when

<title>Orders Export</title> <body> <?php header('Content-Type: application/xls'); header('Content-Disposition: attachment; filename=download.xls'); $con = mysqli_connect('localhost','suresafe ...

phphtmlmysqlexcel

The Gulp task is failing to generate the CSS file

Greetings! I have a task set up in my gulpfile.js as shown below: const gulp = require('gulp'); const sass = require('gulp-sass'); gulp.task('sass', function(){ return gulp.src('sass/*.scss') .pipe(sass()) ...

csssassgulp

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...

css

Modifying a Sass variable using a Knockout binding or alternative method

Is it feasible to dynamically alter a sass variable using data-binding? For instance, I am seeking a way to modify the color of a variable through a button click. I am considering alternative approaches apart from relying on Knockout.js. $color: red; ...

javascriptjqueryhtmlknockout.jssass

Bootstrap slider aligned to the right side

I'm currently utilizing bootstrap 3 for my website. However, I encountered an issue with the slider when viewing the page on a mobile device as the image was displaying outside the viewport, shifted to the right. Additionally, in Firefox, the slider ...

jquerycsstwitter-bootstrap-3

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Turning off font ligatures in CSS (letter connections deactivation)

Typically, modern web browsers will automatically merge certain letter combinations, such as 'f' and 'i', into a single character known as a ligature. While this can enhance readability, it may not always align with a designer's pr ...

cssgoogle-chromefonts

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

javascriptcssreactjsmaterial-ui

The importance of color value is underscored

Is there a way to remove the surrounding color from the value in Visual Studio Code and only display the little square on the left side? [.nav-link-wrapper a { color: #ec0b0b } ] https://i.stack.imgur.com/5uA9k.png ...

cssvisual-studio-codecolors