How to make React js Page Responsive? - css

Question

I am stuck with a problem, I am using argon creative Tim and ReactStrap for making this UI, It's working fine, but when am trying to view it on Mobile View it is not working as expected.
image is not responsive when i want to view on mobile view
login.jsx
Below I share my all code for making UI. let me know if you have any question.
import React, { useState } from "react";
import { useEffect } from "react";
import { NavLink } from "react-router-dom";
import { Button, Row, Col, FormGroup, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Label } from "reactstrap";
import { useHistory } from "react-router";
import "./Login.css";
const Login = ({ user }) => {
return (
<>
<div className="section section-hero section-shaped">
<div className="shape shape-style-1 shape-primary">
<span className="span-150"></span>
<span className="span-50"></span>
<span className="span-50"></span>
<span className="span-75"></span>
<span className="span-100"></span>
<span className="span-75"></span>
<span className="span-50"></span>
<span className="span-100"></span>
<span className="span-50"></span>
<span className="span-100"></span>
</div>
<div className="outer">
<div className="inner" style={{ width: "450px", height: "450px", marginBottom:"80px" }}>
<h3>{user} Log In</h3>
<br />
<Form role="form" method="POST">
<FormGroup className="mb-3">
<Label for="email">Email</Label>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-envelope"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-key"></i>
</InputGroupText>
</InputGroupAddon>
<Input
type="password"
autoComplete="off"
required="required"
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="button"
onClick={login}
>
Sign in
</Button>
</div>
</Form>
<Row className="mt-3">
<Col xs="6">
<a
className="text-light"
href="#"
onClick={e => e.preventDefault()}
>
<small>Forgot password?</small>
</a>
</Col>
{bool ? <Col className="text-right" xs="6">
<NavLink exact to='./signup' className="text-light">Create new account</NavLink>
</Col>
: <Col className="text-right" xs="6">
<NavLink exact to='./vendorsignup' className="text-light">Create new account</NavLink>
</Col>}
</Row>
</div>
</div>
</div>
</>
)
}
export default Login;
Login.css
.outer {
height: 100vh;
background-position: fixed;
overflow: scroll;
overflow: hidden;
}
.form-group label {
display: block;
margin: 0 0 10px;
color: black;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.2em;
}
.form-group input {
outline: none;
display: block;
background: rgba(0, 0, 0, 0.1);
width: 100%;
border: 0;
border-radius: 4px;
box-sizing: border-box;
padding: 12px 20px;
color: rgba(0, 0, 0, 1.6);
font-family: inherit;
font-size: 17px;
font-weight: 500;
line-height: inherit;
transition: 0.3s ease;
}
.signinp {
padding-left: 10px !important;
}
.whiteinput {
background-color: white !important;
}
/* .form-group input:focus {
background-color: transparent;
}
.form-group input:focus {
border: 1px solid black;
} */
.outer {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgb(34 35 58 / 20%);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all 0.3s;
}
.outer .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.outer h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}

Answer 1

In your case you aren't using any code to have responsiveness in your App.
You can use the #media rule. Also good practice is to use CSS Grid system.
There are also CSS Frameworks like Bootstrap which have their implementation of responsive grid system which is very easy to use.

Answer 2

Its not related to Reactjs, you will have to modify your css code, for that you can use CSS media queries to target the screen/mobile sizes as per your need.
Example :
/* For screen size more than 400px */
#media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
/* For screen size less than 600px */
#media screen and (max-width: 600px) {
body {
background-color: lavender;
}
}
Reference : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can also try bootstrap, foundation, materialize css libraries which has ready made classes for responsive screen sizes.
https://www.w3schools.com/bootstrap/bootstrap_grid_stacked_to_horizontal.asp

Answer 3

You have to make changes to CSS so that the DOM elements rendered on screen look good on different screen sizes
Some things which you can explore are
Media queries
Material UI Grid
Bootstrap's breakpoints

Answer 4

I think the single most important thing you can do if you want to start working with "intuitive" responsive design is to update your box-model to use the border-box.
Box Sizing CSS-Tricks
Add the following to your CSS
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
This will size your containers to match what you specify in CSS, with the padding on the inside and the margins outside. I am still amazed this isn't the default. All projects should implement this fix/change.
To specifically address the responsive issue with the login modal, set the max-width to a static value, i.e. the 450px and set the width to a relative value, i.e. 90%.
.inner {
max-width: 550px; // <-- static max value
width: 90%; // <-- dynamic relative value
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgb(34 35 58 / 20%);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all 0.3s;
}
Play around and resize the view window, and then test out toggling the responsive view in the preview window.