Currently working on enhancing the responsiveness of the login form

I am encountering difficulties while trying to make the page responsive. I've checked my basic code, but something seems off. Could you please take a look at the plnkr link below and give me some feedback on where I might have gone wrong?

Here's the plnkr link

    .login-btn, .btn.login-btn {
  border-radius: 8px;
  text-align: center;
  min-height: 44px;
  min-width: 140px;
  font-weight: 200;
  font-size: 20px;
  padding: 0 10px;
  margin: 20px;
}

.login-cont input[type="text"], .login-cont input[type="password"]  {
  border: 1px solid #61839C;
  height: 44px;
  width: 358px;
  font-size: 20px;
  padding: 0 10px;
  font-weight: 300;
  display: block;
  margin-top: 20px;
  padding-left: 20px;
}

Answer №1

Make sure to include the necessary bootstrap CSS and JS links in your code snippet. Additionally, don't forget to set the width of the input tag to 100% for better responsiveness. Take a look at this sample code below, which demonstrates how to style login buttons and input fields:

.login-btn, .btn.login-btn {
  border-radius: 8px;
  text-align: center;
  min-height: 44px;
  min-width: 140px;
  font-weight: 200;
  font-size: 20px;
  padding: 0 10px;
  margin: 20px;
}

.login-cont input[type="text"], .login-cont input[type="password"] {
  border: 1px solid #61839C;
  height: 44px;
  font-size: 20px;
  width: 100%;
  font-size: 20px;
  padding: 0 10px;
  font-weight: 300;
  display: block;
  margin-top: 20px;
  padding-left: 20px;
}

Don't forget to add the essential HTML structure with proper linking of external files for Bootstrap and jQuery:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
  
    <div class="container">
      <div class="row">
        <div class="centering text-center">
          <div class="login-cont col-md-4 col-md-offset-4 vcenter">
            <form id="login_form" name="login-form" #f="ngForm"  role="form" (ngSubmit)="f.form.valid && login()" novalidate>
              <label id="loginError" class="login-error"></label>

              <img src="https://www.islonline.com/static/v7/images/logo-islonline.svg"   class="img-responsive" alt="logo" width="334" height="100">

              <input id="username" class="form-control"  type="text" name="username" placeholder="Username" [(ngModel)]="username" required>
              <input id="userPassword" class="form-control"  type="password" name="userPassword" required placeholder="Password" [(ngModel)]="password">
              <div class="forgot-password-form">
                <span>Forgot Password ?</span>
              </div>
              <button type="submit" class="btn login-btn">Login</button>
            </form>
          </div>
        </div>
      </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

Refresh React component after form submissionIn this guide, learn how to automatically refresh a

Every time I submit the page, it keeps loading indefinitely and I have to manually refresh the page to see the input in my table. The table.js and submit.js are located in two different components. Is there a way to automatically refresh the page after sub ...

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

Tips for including input text in a select option dropdown menu

Can someone guide me on adding an input text box to a select dropdown in Javascript and utilizing it as a search filter? <select class="form-control"> <option value="trans">Trans</option> <option value="fund">Fund</opt ...

JavaScript functioning in Firefox but not Chrome

Here is the code snippet in question: $('#ad img').each(function(){ if($(this).width() > 125){ $(this).height('auto'); $(this).width(125); } }); While this code works correctly in Firefox, it seems to have i ...

Implementing PHP code to prevent the submission of forms with invalid inputs

When working on a form validation process in PHP, I encountered a challenge in preventing the form from being submitted to the database when there are errors in the input fields. While I was able to display error messages for invalid inputs upon submitti ...

Can someone help me locate the selector for using .click in Nightmare.js?

I am currently using Nightmare.js to automate the scraping of a webpage. As a sysadmin, my understanding of Node.js and CSS is limited. So far, I have been able to successfully use Nightmare to input and click on certain buttons in order to log in. I iden ...

The CSS code functions properly in Firefox, however, it does not seem to be functioning in

The menu I created in Magento is functioning correctly in Firefox. When I hover over the menu in Firefox, it works fine, but I am not seeing any hover effects in Chrome. Here is how my hover style is defined: #nav { width:965px; margin ...

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

Can someone explain why my button icons are not aligning to the center properly?

I have a small issue with the icons I pulled from react-icons - they appear slightly raised within the buttons. How can I position them in the middle? That's my only query, but I can't post it alone due to mostly having code in my post. What an ...

Eliminate the outline of the pager row in an asp.net grid view

Within my grid view, I have applied a bottom border to all cells. However, this border is also appearing on the pager row, which is not desired. To address this issue, I attempted to use jQuery to remove the border, but it seems that my selector is incorre ...

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

In my form, there are 2 numbers and 4 radio buttons for each. Only one option can be selected per number. When the form is submitted, only the database for question 2 will be updated. However, if question 2 is left blank, then question 1's database w ...

Innovative Audio Editing Tool using Javascript

Currently, I am in the process of creating a JavaScript-based audio editor that will allow users to record, play, and edit audio files. It is crucial for the tool to be able to visualize both real-time recorded audio and selected/uploaded audio files. Whil ...

Bootstrap implementation for personalized notifications

I am utilizing bootstrap notifications to display important messages to my users. Within my code, there is a DIV element named <div class="notifications bottom-right"></div> Theoretically, the library should be handling the JavaScript. I ha ...

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code. An essential requirement involves implementing C ...

What purpose does the additional symbol "$()" serve in the selector "$($())"?

Currently, I am looking to incorporate a jQuery scrollspy feature into one of my ongoing projects. Upon coming across this jsfiddle (https://jsfiddle.net/mekwall/up4nu/), I successfully integrated it into my project. However, I have hit a roadblock while ...

What exactly does original-title refer to in HTML coding?

I have been searching extensively, but I cannot find any information that explains the meaning and proper usage of the original-title in HTML code. I am unsure if original-title is a Tag or Attribute in HTML, and if it is the same as title? I came across ...

Working with CSS styles for the <datalist> element

I currently have a basic datalist drop-down menu and I am looking to customize the CSS to match the style of other fields on my website. However, as someone new to web design, I am unsure of how to go about this process. Check out the code here: http://j ...

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

Refresh the Google Maps location using GPS coordinates

Currently, I am working with an Arduino that has a GPS chip and processing NMEA strings with Python. I have an HTML file set to auto-refresh every x seconds to update the marker's position. However, I would like to update the position information with ...

CSS-enhanced automatic scrolling

On my WordPress website, there is a project slider that consists of images with text. Currently, the slider does not auto-scroll and requires manual navigation using buttons. If I want to eliminate the need for buttons and make the slider scroll automatic ...