Looking for assistance with designing a responsive login box

Greetings! I'm a beginner in programming, so please excuse me if my issue seems simple.

I have a website with a login form, but I am struggling to make it responsive. Every time I attempt to do so, the entire layout gets messed up.

Could someone kindly assist me? Here is my code:

Login.Php:

<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- More code here -->

Login.css

*{
margin: 0;
padding: 0;
font-family: sans-serif;
color: white;
}
<!-- CSS styling for login page -->

General.css

html,body{
background-repeat: no-repeat;
background-attachment: fixed; 
background-size: cover;
top:0px;
left:0px;
height: 100%;
min-height: 100%;
}

Regrettably, I haven't been able to solve this on my own. Your help is greatly appreciated!

I am completely new to the world of programming.

Thanks in advance!

javascripthtmlcssresponsive-designresponsive

Answer №1

I have discovered the solution :

@media (max-width: 700px){
    .form-box{
        zoom: 80%;
    }
}

Answer №2

To achieve responsiveness, utilizing CSS media queries is essential. It would be advisable not to explicitly set the height of elements in order to allow for more flexibility.

.form-box{
    width: 300px;
}

@media (min-width: 768px){
    .form-box{
        width: 500px;
    }
}

@media (min-width: 992px){
    .form-box{
        width: 700px;
    }
}

@media (min-width: 1200px){
    .form-box{
        width: 800px;
    }
}

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

Personalize your Native Base tab design

Recently, I've delved into the world of React Native and now find myself in need of assistance with customizing my tabs. Utilizing advanced tabs by Native Base, I aim to transform this: https://i.stack.imgur.com/xhNwP.png Into something more akin ...

javascriptioscssreact-native

Seeking the location of the `onconnect` event within the Express framework

With the use of "express," I have implemented a middleware function like so: app.use(function(request, response, next) { console.log(request.headers["user-agent"]); // etc. }); This currently displays the user-agent header in the console for ever ...

javascriptnode.jsexpress

Trouble sliding with Material UI Slider

I've encountered an issue with my Material UI slider - it doesn't slide when clicked and dragged. I followed one of the examples on the Material UI website (https://material-ui.com/components/slider/) and included an onChange function. The values ...

javascriptreactjsmaterial-ui

Deliver feedback from NodeJS Server to JavaScript on the client side

I have set up an HTTP server in NodeJS by utilizing the http.createServer(...) method. In my client-side JavaScript file, I sent a query using the POST method to the localhost URL. The server effectively received the data from the client, but now I am enco ...

javascriptnode.jsxmlhttprequestfetch-api

Is it possible to combine JavaScript objects using TypeScript?

Currently, I am dealing with two objects: First Object - A { key1 : 'key1', key2 : 'key2' } Second Object - B { key1 : 'override a' } I am looking to combine them to create the following result: The Merged Re ...

javascripttypescript

`Adjusting function calls based on the specific situation`

On my webpage, I have implemented a tab system where clicking on a tab displays the corresponding content below. This functionality is controlled by a JavaScript/jQuery function called 'changeTab'. Now, I want to set up individual JavaScript fun ...

javascriptjquery

Customize the text color of the active tab in Material-UI Tabs

I am facing a situation where I have this specific object: const tabStyle = { default_tab:{ color: '#68C222', width: '33.3%', backgroundColor: '#FFFFFF', fontSize: 15 }, active_tab: ...

javascriptreactjsmaterial-ui

Monitor and retrieve live updates of links using Javascript

I am a beginner in JavaScript and recently developed a successful Chrome extension for Dubtrack. I have been struggling to find a way to make my injected script run in real-time and grab the latest YouTube music video URL. Any assistance would be greatly a ...

javascriptjqueryajaxgoogle-chrome-extensionjavascript-injection

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

https://i.sstatic.net/Ov3yF.png I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. The ...

cssreactjsmaterial-ui

How can we bring in a function into a Vue component?

I'm currently facing an issue with importing a single function into my Vue component. To tackle this problem, I separated the function into its own js file: randomId.js: exports.randomId = () => //My function ... Within my Vue component, I attem ...

javascriptwebpackvue.jsecmascript-6

React-scripts testing now displays error messages without a traceback

After recreating the browser version of the TacticToy game using React, I encountered an issue while writing unit tests. The problem is that there is no complete traceback provided for a custom exception, with only the test function being highlighted: htt ...

javascriptnode.jsreactjsjestjsreact-scripts

Trouble with the x-cloak attribute in alpine.js

Experience with TailwindCSS and AlpineJS in my current project has brought to my attention a slight issue with the header dropdowns flashing open momentarily when the login page loads. I attempted to use x-cloak to address this, but encountered some diffic ...

javascripthtmlcsstailwind-cssalpine.js

Inject the JavaScript template into an HTML page within a <div> element

Looking for a solution to format JSON API data listing books with title, author, and other properties into HTML? Utilizing ES6 backticks and JavaScript templating, the challenge arises when needing to display two cards per row on the HTML page. The issue l ...

javascriptjqueryhtmlcssunderscore.js-templating

Searching for a solution on how to effectively utilize ng-repeat to filter data based on a specific field when passing an array, while considering that the field may or may not be included in the array. Working within Angular

ng-repeat="equipment in equipments | filter: {guidEquiment: ['cb8b22e1-43f0-4dc9-b2dc-34847731e2d1','cb8b22e1-43f0-4dc9-b2dc-34847731e2d1','cb8b22e1-43f0-4dc9-b2dc-34847731e2d1',....N]}" When the variable equipment has a guid ...

htmlangularjsmultidimensional-arrayangularjs-ng-repeat

Tips for selectively executing a script based on whether the DIV is within the viewport

I have a created a script as shown below: jQuery(function($) { $('.count').countTo({ from: 0, to: '400', speed: '3000', refreshInterval: 50, onComplete: func ...

javascriptjquery

Challenges with navigating in a compact JavaScript application utilizing only a library called page.js

Currently, I am delving into the workings of a small routing library designed for javascript applications called page.js. To better understand how it operates, I created a very basic app for personal learning. However, I am facing issues making it function ...

javascriptnode.js

Tips for creating responsive Math Latex

Check out this link to my website page. Also, take a look at this other link. While using Bootstrap, I've noticed that all content is responsive except for the equations in the first link and the Matrix multiplication example in the second link towar ...

csstwitter-bootstrapresponsive-designlatex

Sending data from an HTML form to a div section without the need to refresh the entire page

I am currently working on a slide-down panel created in JQuery within a table. This panel includes a contact form where users can submit their information. My challenge is to post the form data to PHP without reloading the entire page, as the slide-down ...

phphtmlajax

Using JavaScript to modify a section of an anchor link attribute

I am looking to dynamically update part of the URL when a specific radio button is selected. There are three purchase links, each representing a different amount. After choosing an animal, I need to select one of the three amounts to spend. How can I modi ...

javascripthtmlhref