We Keep Coding

How to make a react app change according to the browser size?

I'm writing a code for a UI for a certain group, and i have the following code:
App.js:
import React, { Component } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Helmet from 'react-helmet';
import TextField from "#mui/material/TextField";
import HRLOGO from './images/highradius-logo-3.png';
import ABCLOGO from './images/Group 20399.png';
export default class App extends Component
{
state = {};
render()
{
return (
<div className="Bod">
<div>
<img src={HRLOGO} alt="" className="container-div"/>
</div>
<div>
<img src={ABCLOGO} alt="" className="container-div2"/>
</div>
<Helmet>
<style>{'body { background-color: #2d4250; }'}</style>
</Helmet>
<div>
<h1 className="InvoiceStyle">Invoice List</h1>
</div>
<div className="Rectangle">
</div>
<div className="search">
<TextField
id="outlined-basic"
variant="outlined"
fullWidth
label="Search Customer ID"
/>
</div>
<footer className="Privacy">
<p>
Pivacy Policy
</p>
</footer >
</div>
);
}
}
App.css:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.Rectangle {
width: 2000px;
height: 500px;
background: #293d48;
position: fixed;
top: 165px;
}
.container-div {
display: flex;
height: 8vh;
width: 20vw;
position: fixed;
top: 8px;
right: 600px;
text-align: center;
}
.InvoiceStyle {
display: flex;
color: #fff;
font-family: "Open Sans";
position: fixed;
top: 100px;
left: 25px;
}
.container-div2 {
display: flex;
height: 8vh;
width: 20vw;
position: fixed;
top: 7px;
left: 15px;
}
.Privacy {
display: flex;
position: fixed;
top: 700px;
left: 600px;
}
.search {
position: fixed;
top: 175px;
left: 600px;
width: 20%;
/* height: 40px; */
background-color: #fff;
border: none;
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: rgb(11, 68, 253);
}
.App-link {
color: #ff0000;
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
How do i make it such that the images and text change according to the aspect area of the platform it is being viewed it? For example, normally on a 16:9 ratio it looks like this:
When browser size changes:
How do I prevent this? Any help would be useful. Thanks!

what is causing borders to appear in my modal?

there are 2 silver borders in my modal, I looked over the css but there are no border property or anything of that sort that could be the cause. I tried going through developer tools to try and maybe select the border but realized I am unable to do that too. I tried going through the code individually but couldn't locate the source
I looked over the entire code and I feel dumb but I couldn't figure out what's causing the border to appear for the life of me.
my JSX:
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./Signin.css";
const Modal = props => {
const closeOnEscapeKeyDown = e => {
if ((e.charCode || e.keyCode) === 27) {
props.closeModal();
}
if ((e.charCode || e.keyCode) === 87) {
props.showModal();
}
};
useEffect(() => {
document.body.addEventListener("keydown", closeOnEscapeKeyDown);
return function cleanup() {
document.body.removeEventListener("keydown", closeOnEscapeKeyDown);
};
}, []);
return ReactDOM.createPortal(
<CSSTransition
in={props.show}
unmountOnExit
timeout={{ enter: 0, exit: 300 }}
>
<div className="modal" onClick={props.closeModal}>
<div className="modal-content" onClick={e => e.stopPropagation()}>
<div className="modal-header">
<h4 className="modal-title">Sign in</h4>
</div>
<div className="modal-body">
<div className = "modal-input-field">
<div className = "modal-username-field">
<p className = "p-username">Username</p>
<input tag = "username" placeholder = "eg: muhammet-aldulaimi"/>
</div>
<div className = "modal-password-field">
<p className = "p-password">Password</p>
<input tag = "password" placeholder = "eg: someStrongPassword123"/>
</div>
</div>
<div className = "modal-submit">
<button className = "modal-submit-button">Submit</button>
</div>
</div>
<div className="modal-footer">
<button onClick={props.closeModal} className="button">
Close
</button>
</div>
</div>
</div>
</CSSTransition>,
document.getElementById("root")
);
};
export default Modal;
my CSS:
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease-in-out;
pointer-events: none;
}
.modal.enter-done {
opacity: 1;
pointer-events: visible;
}
.modal.exit {
opacity: 0;
}
.modal-content {
width: 400px;
height: 500px;
background-image: url(../../Images/flowersSidebarBackground.png);
transition: all 0.3s ease-in-out;
transform: translateY(-200px);
}
.modal.enter-done .modal-content {
transform: translateY(0);
}
.modal.exit .modal-content {
transform: translateY(-200px);
}
.modal-header {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0px 0px 0px;
}
.modal-title {
/* padding-bottom: 20px; */
font-family: 'Pacifico', cursive;
background-image: linear-gradient(45deg, #a9dba4, #e25734);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
font-size: 38px;
font-weight: 40px;
}
.modal-body {
padding: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modal-input-field {
width: 80%;
}
.modal-username-field {
display: flex;
flex-direction: column;
}
.p-username {
padding-top: 10px;
font-size: 20px;
background-image: linear-gradient(45deg, #a9dba4, #e25734);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
}
.modal-password-field {
display: flex;
flex-direction: column;
}
.p-password {
padding-top: 10px;
font-size: 20px;
background-image: linear-gradient(45deg, #a9dba4, #e25734);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
}
.modal-submit {
display: flex;
justify-content: center;
padding-top: 30px;
}
.modal-submit-button {
background-color: rgb(24, 102, 116);
padding: 20px 40px;
border-radius: 7px;
}
.modal-footer {
padding: 10px;
}

The borders give you visual feedback that the element is focused. You can get rid of it by adding the following code in your Modal.css
input:focus {
outline: none;
}

I solved the issue by tracing the problem to a Bootstrap cdn, I fixed removing the borders by adding a border: 0px solid black to make the border 0 pixels therefor nonexistent+

Is there a frontface-visibility option in CSS?

CSS/JS beginner here, I'm following a webkit 3d-transforms guide and trying to apply a hidden front-face option for the ring-rotation part:
The "backfaces-visible" checkbox hides/shows the backface, could the opposite be implemented where the backface is visible and the front is hidden?
Edit:
With respect to the first comment, I'd like to clarify that the desired result should look like this (front planes are hidden while rotating):
(Front panels were erased with photo-editing, the rest are CSS changes. Mind the poorly edited left card)

Not 100% sure if this is what you are looking for, but If you don't use the backface-visiblity parameter at all, i.e. leave it at its default "visible" and if it has a non-transparent background, the backside will always cover the frontside, if its z-index or order in the HTML code is set that way.
My snippet below is derived from some older code I had at hand, in case you wonder. Press the button below the circle to trigger a turning animation.
function turn1() {
$('#front').css({transform: 'rotateY(180deg)'});
$('#back').css({transform: 'rotateY(360deg)'}).delay(2000).promise().then(turn2);
};
function turn2() {
$('#front').css({transform: 'rotateY(0deg)'});
$('#back').css({transform: 'rotateY(180deg)'}).delay(2000).promise().then(turn1);
};
$('#go').on('click', turn1);
.wrapper {
position: relative;
margin: 20px auto;
width: 180px;
height: 180px;
font-size: 36px;
perspective: 150px;
}
#front, #back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 2s;
display: flex;
justify-content: center;
align-items: center;
}
#front {
background: green;
}
#back {
background: yellow;
transform: rotateY(180deg);
}
.x {
text-align: center;
}
button {
padding: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
<div class="x"><button id="go">Press to rotate</button></div>
If you add backface-visibility: hidden to the otherwise unchanged code, you see both sides when rotating:
function turn1() {
$('#front').css({transform: 'rotateY(180deg)'});
$('#back').css({transform: 'rotateY(360deg)'}).delay(2000).promise().then(turn2);
};
function turn2() {
$('#front').css({transform: 'rotateY(0deg)'});
$('#back').css({transform: 'rotateY(180deg)'}).delay(2000).promise().then(turn1);
};
$('#go').on('click', turn1);
.wrapper {
position: relative;
margin: 20px auto;
width: 180px;
height: 180px;
font-size: 36px;
perspective: 150px;
}
#front, #back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 2s;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
}
#front {
background: green;
}
#back {
background: yellow;
transform: rotateY(180deg);
}
.x {
text-align: center;
}
button {
padding: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="front">Front</div>
<div id="back">Back</div>
</div>
<div class="x"><button id="go">Press to rotate</button></div>

How do you start new row on left with dynamic content in Reactjs?

I am working on a personal portfolio page using ReactJS. I am currently trying to create a project page that has rows of flipping cards, however, whenever the cards reach their max-width and move to the next line the card always starts in the center of the page when it needs to start on left. I have tried creating a row wrapper to float: left which breaks the application and a multitude of other ways but I would like to see the best way to create dynamic rows and columns from a mapped array and start new rows from the left. added an image to highlight the issue
Projects.js
import React, { Fragment } from 'react';
import Card from '../common/Card/Card';
import { PROJECTS } from "../../shared/constants/projects";
import "./projects.scss";
const Projects = () => {
return (
<Fragment>
<div className="grid">
{
PROJECTS.map((project, i) => {
return (
<Card animatedCard={true} project={project} key={i} />
)
})
}
</div>
</Fragment>
)
}
export default Projects;
projects.scss
.grid {
width: 60%;
text-align: center;
margin: 0 20% 0 20%;
}
Card.js
import React, { Fragment } from 'react';
import CardFront from './CardFront';
import "./card.scss";
import CardBack from './CardBack';
const Card = props => {
return (
<Fragment>
{props.animatedCard ?
<div className="card-container">
<div className="card-body">
<CardBack project={props.project}/>
<CardFront project={props.project} />
</div>
</div> : null
}
</Fragment>
)
}
card.scss
.button-wrapper {
height: 200px;
bottom: 0;
}
.card-container {
display: inline-block;
position: relative;
z-index: 1;
margin: 50px 25px 0px 25px;
width: 300px;
height: 400px;
perspective: 1000px;
}
.card-body {
width: 100%;
height: 100%;
background-color: white;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
.card-container:hover .card-body {
transform: rotateY(180deg);
}
.card-container:hover > .card-body > .side-front {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in, visibility 0.75s linear;
}
.card-side {
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
color: #8e8d8a;
backface-visibility: hidden;
font-family: sans-serif;
text-align: center;
box-shadow: 0 10px 35px rgba(50, 50, 93, 0.1), 0 2px 15px rgba(0, 0, 0, 0.07);
}
.card-header-img {
max-width: 100%;
max-height: 123px;
margin: 0;
padding: 0;
}
.card-technologies {
list-style: none;
width: 70%;
}
.card-technologies-item {
border-bottom: 1px solid #eee;
margin-bottom: 15px;
padding: 0.75rem;
}
.description {
margin: 30px 20px 20px 20px;
font-size: 18px;
font-weight: 400;
height: 240px;
}
.side-front [class^="col-xs"]:first-of-type {
padding-left: 0;
}
.side-back {
z-index: 2;
text-align: center;
transform: rotateY(180deg);
}

This is happening since you are using text-align: center; in your .grid css.
If you remove it all the cards in the row should start at the left end of the row:
.grid {
width: 60%;
margin: 0 20% 0 20%;
}
Another alternative would be making your .grid a flexbox:
.grid {
width: 60%;
margin: 0 20% 0 20%;
display: flex;
flex-wrap: nowrap;
}

Overlapping avatars: convert SCSS to CSS and PUG to HTML

I'm trying to create overlapping avatars in HTML and CSS. It is based on this code snippet. Only that this snippet is created in SCSS and PUG. How can I convert PUG to HTML and SCSS to CSS? I have a problem that the avatars are distant from each other and the name does not appear when you hover over the avatar.
Check code here.
import React from 'react';
import { render } from 'react-dom';
import './style.css';
class App extends React.Component {
constructor() {
super();
this.state = {
todos:
[
{name:'Tobias', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/7/77/2x01_The_One_Where_Michael_Leaves_%28098%29.png/revision/latest?cb=20121126025806'},
{name:'Lindsey', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/1/16/Season_3_Character_Promos_-_Lindsay_Bluth_F%C3%BCnke_01.jpg/revision/latest?cb=20111027201233'},
{name:'Buster', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/b/be/Season_3_Character_Promos_-_Buster_Bluth_01.jpg/revision/latest?cb=20111027201440'},
{name:'George Michael', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/c/c3/Season_1_Character_Promos_-_George_Michael_Bluth_02.jpeg/revision/latest?cb=20120429230332'},
{name:'Gob', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/0/02/Season_1_Character_Promos_-_G.O.B.jpeg/revision/latest?cb=20120429230530'},
{name:'Michael', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/1/10/1x01_Pilot_%2839%29.png/revision/latest?cb=20120301050056'}
],
};
}
render() {
let todos = this.state.todos.map((todo, index) =>
<Todo
key={index}
index={index}
todo={todo}
/>
)
return (
<div>
<ul>{todos}</ul>
</div>
);
}
}
class Todo extends React.Component {
render() {
const Background = this.props.todo.avatar;
const name = this.props.todo.name;
const profile = {
"&:hover&:after": {
position: "absolute",
content: `attr(${name})`,
background: "rgba(255, 255, 255, .95)",
color: "inherit",
fontSize: "10px",
padding: "4px",
width: "auto",
bottom: "-0.5rem",
right: "-0.5rem",
boxShadow: "0px 5px 12px rgba(0, 0, 0, .12)",
opacity: "0",
borderRadius: "0.15rem",
animation: "fade 100ms ease 750ms forwards"
}
}
return (
<ul className="c-profile__list">
<li style={profile} className="c-profile" style={{backgroundImage: `url(${Background})`}}></li>
</ul>
);
}
}
render(<App />, document.getElementById('root'));
CSS
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui;
flex-direction: column;
color: #2c2c54;
font-size: 1.6rem;
}
.c-profile {
width: 70px;
height: 70px;
border: 4px solid white;
border-radius: 50%;
box-shadow: 0px 3px 8px rgba(44, 44, 84, .2);
display: inline-block;
background: white;
cursor: pointer;
background-size: cover;
background-position: center center;
transition: all 200ms ease;
}
.c-profile:nth-of-type(n+2) {
margin-left: -42px;
}
.c-profile:hover {
transform: scale(1.2);
box-shadow: 0px 8px 20px rgba(44, 44, 84, .2);
}
.c-profile:hover:after {
position: absolute;
content: attr(username);
background: rgba(255, 255, 255, .95);
color: inherit;
font-size: 10px;
padding: 4px;
width: auto;
bottom: -0.5rem;
right: -0.5rem;
box-shadow: 0px 5px 12px rgba(0, 0, 0, .12);
opacity: 0;
border-radius: 0.15rem;
animation: fade 100ms ease 750ms forwards;
}
.c-profile__list {
display: flex;
position: relative;
width: auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
.c-profile__list:hover .c-profile:nth-of-type(n+2) {
margin-left: 7px;
}
article {
width: 100%;
max-width: 600px;
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
ul {
list-style: none;
display: inline;
}

From a short look...
You are wrapping ul tags in a parent ul. Quick fix:
https://stackblitz.com/edit/react-ctuy4n?file=index.js

In your Todo, you need to remove the additional <ul> tag around each item and add your name as a title prop:
return (
<li style={profile} className="c-profile" title={name} style={{backgroundImage: `url(${Background})`}}></li>
);