I am trying to get a footer properly but I can't get the result, I expect
here is what I expect to have:
below is what I have:
The copyright text is lost somewhere on the right. You can't see it as background is white.
here is the code:
import React, {} from 'react';
import {Form, InputGroup} from 'react-bootstrap';
import { Navbar } from 'react-bootstrap';
import TextContents from '../assets/translations/TextContents';
import WhiteButton from './materialdesign/WhiteButton';
import SiteLogo from '../assets/images/village-logo.svg';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faLinkedinIn, faInstagram } from '#fortawesome/free-brands-svg-icons'
import './Footer.css';
class Footer extends React.Component {
constructor(props, context) {
super(props);
this.state = {showLogin: false};
}
render() {
return (
<div>
<div className="container">
<Navbar className="navbar" width="100" expand="lg">
<div className="footer-menu">
<div>
<Navbar.Brand href="/">
<img
src= { SiteLogo }
className="logo"
alt="Village"
/>
</Navbar.Brand>
</div>
<div className="subscribe">
<InputGroup className="subscribe-form">
<Form.Control
type="email"
placeholder={TextContents.EmailSubscribe}
className="subscribe-form-control"
/>
</InputGroup>
</div>
<div className="follow-container">
<WhiteButton textSize="14" link_href="#" text={TextContents.Join} />
<p className="follow-text"> {TextContents.Follow} </p>
<FontAwesomeIcon icon={faFacebook} className="follow-icon"/>
<FontAwesomeIcon icon={faTwitter} className="follow-icon"/>
<FontAwesomeIcon icon={faInstagram} className="follow-icon"/>
<FontAwesomeIcon icon={faLinkedinIn} className="follow-icon"/>
</div>
</div>
</Navbar>
</div>
<div>
<p className="copyright-text">{TextContents.Copyright}</p>
</div>
</div>);
}
}
export default Footer;
and the css
.navbar{
background-color: white;
width: 80%;
margin-top: 2%;
margin-bottom: 2%;
font-family: "Fredoka One";
font-size: 18px;
margin: auto;
}
.logo {
width: 214px;
height: 28px;
margin-right: 24;/*theme.spacing(3)*/
}
.container{
display: flex;
box-shadow: none;
background-color: #ffffff;
/*margin-top: 24; /*theme.spacing(3),*/
position: absolute;
bottom: 0;
width: 80%;
height: 2.5rem;
}
.footer-menu {
display: flex;
position: relative;
}
.subscribe {
display: flex;
position: relative;
border-radius: 21px;
background-color: #f4f7f8;
margin-right: 16; /*theme.spacing(2),*/
margin-left: 24; /*theme.spacing(3),*/
width: 467px;
height: 40px;
}
.follow-container {
text-align: center;
align-items: center;
justify-content: center;
margin-left: 16px;/*theme.spacing(2),*/
min-width: 300px;
}
.follow-text {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #ff7255;
font-family: Source Sans Pro;
min-width: 75px;
margin-left: 20px;
margin-right: 5px;
}
.follow-icon {
width: 18px;
height: 18px;
margin-right: 2px;
margin-left: 2px;
color: #ff7255;
}
.copyright-text {
font-size: 14px;
font-weight: bold;
text-align: center;
color: #ffff7255;
font-family: Source Sans Pro;
}
.subscribe-form {
width: 470px;
height: 40px;
border-radius: 20px;
margin-left: 60px;
}
.subscribe-form-control {
font-family: Source Sans Pro;
text-align: left;
color: #cdcece;
background-color: #f4f7f8;
border-style: none;
}
Any idea How to properly center everything and make sure I have 2 lines.
Thanks
The copyright text is lost somewhere on the right. You can't see it as
background is white
Its because .container has position: absolute
You can put copyright div inside container (and apply necessary changes to make it appear below .navbar) or get rid of position: absolute
Any idea How to properly center everything and make sure I have 2
lines.
As you are using display: flex there are two properties which allow you to align stuff in vertical/horizontal way justify-content, align-items ( they depend on flex-direction though )
Using flexbox add to the container div these bootstrap classes d-flex flex-column justify-content-center align-items-center.
Or manually add these styles to a .container selector
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
Related
Actually, I have two questions
The First one is that Why is the following code using styled-components not working, I removed node modules, installed it again globally etc and it's not working. The output render is blank.
Am I using the Pseudo classes correctly in styled components If not please show me
I would really appreciate it if you could show me through the code I have.
I will List my Js file plus the desired CSS below,
I only want the CSS through styled-components
import React, { useRef} from "react";
import ReactDOM from 'react-dom/client';
import Home from "../Dashboard/Home";
import App from '../../App';
import Bye from "./Login"
import styled from "styled-components"
function Register(){
const name=useRef()
const email=useRef()
const password=useRef()
const root = ReactDOM.createRoot(document.getElementById('root'));
const handleClick=()=>{
if(name.current.value&&email.current.value&&password.current.value)
{
localStorage.setItem("name",name.current.value)
localStorage.setItem("email",email.current.value)
localStorage.setItem("password",password.current.value)
localStorage.setItem("signUp",email.current.value)
alert("Account created successfully!!")
root.render(
<React.StrictMode>
<Home/>
</React.StrictMode>
);
}
}
const goHome=()=>{
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
}
const handleSignIn=()=>{
root.render(
<React.StrictMode>
<Bye />
</React.StrictMode>
);
}
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
`
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
&:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
animation: animate 6s linear infinite
}
`
const Title = styled.h2`
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
`
return(
<Body>
<Box>
<div className="form">
<Title>Hello Lets Get you Started</Title>
<div className="inputBox">
<input type="text"required="required" ref={name}/>
<span>Your Full Name: </span>
<i></i>
</div>
<div className="inputBox">
<input type="text"required="required" ref={email}/>
<span>Your Email: </span>
<i></i>
</div>
<div className="inputBox">
<input type="password" required="required" ref={password}/>
<span> Your Password: </span>
<i></i>
</div>
<div class="Links">
<button className="btn-2 btn" onClick={handleSignIn}> Sign In</button>
<button className="btn-3 btn" onClick={goHome}>Return Home</button>
</div>
<button type="submit" className="btn-1" onClick={handleClick}>Sign Up </button>
</div>
</Box>
</Body>
)
}
export default Register;
thats my JS file (not jsx)
below is the desired Css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700,800,900,&display=swap');
.body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
}
.box{
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
}
.title{
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
}
.box::before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff);
animation: animate 6s linear infinite
}
.box::after{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate{
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
.form{
position: absolute;
inset: 2px;
border-radius: 8px;
background: #28292d;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
.inputBox span{
display: flex;
justify-content: space-between;
margin-right: 55px;
margin-top: -60px;
font-size: 18px;
font-weight: 500;
left: 0;
padding: 20px 10px 10px;
pointer-events: none;
letter-spacing: 0.05em;
transition: 0.5s
}
.inputBox{
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input{
position: relative;
width: 165%;
padding: 20px 10px 10px;
background: transparent;
border: none;
text-align: left;
font-weight: 500;
outline: none;
color: black;
font-size: 1em;
letter-spacing: 0.05em;
font-size: 20px;
z-index: 10;
}
.btn-1{
margin-top: 30px;
pointer-events: auto;
cursor: pointer;
}
.Links{
margin-top: 25px;
}
.btn-2{
display: flex;
align-items: left;
margin-top: -10px;
font-size: 1.25em;
border: none;
outline: none;
background: none;
padding: 0;
color: #8f8f8f;
cursor: pointer;
}
.Links button:hover
{
color: #45f3ff;
}
.btn-3{
display: flex;
flex-direction: column;
margin-left: 25rem;
margin-top: -20px;
font-size: 1.25em;
cursor: pointer;
border: none;
outline: none;
background: none;
padding: 0;
color: #8f8f8f;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span
{
color: #45f3ff;
transform: translateY(-44px);
font-size: 1.25em;
}
.inputBox i{
position: absolute;
left: 0;
bottom: -7px;
width: 170%;
height: 2px;
background: #45f3ff;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid ~ i,
.inputBox input:focus ~ i
{
height: 55px;
width: 170%;
top: 2px;
}
.btn-1{
border: none;
outline: none;
background: #45f3ff;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
.btn-1:active{
opacity: 0.8
}
Edit: There seems to be that the code works now randomly but i didnt even put all my css and its giving me the exact output i want weird?
It is important to define your styled components outside of the main react component, otherwise it will be recreated on every single render pass. Defining a styled component within the react component will prevent caching and drastically slow down rendering speed, and should be avoided.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components';
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
`;
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
border-radius: 8px;
overflow: hidden;
&:before{
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
animation: animate 6s linear infinite
}
`;
const Title = styled.h2`
align-items: center;
font-size: 55px;
font-weight: 600;
color: red;
`;
function App() {
const name = useRef();
const email = useRef();
const password = useRef();
const handleClick = () => {
if (name.current.value && email.current.value && password.current.value) {
localStorage.setItem('name', name.current.value);
localStorage.setItem('email', email.current.value);
localStorage.setItem('password', password.current.value);
localStorage.setItem('signUp', email.current.value);
alert('Account created successfully!!');
}
};
const goHome = () => {};
const handleSignIn = () => {
root.render();
};
return (
<Body>
<Box>
<div className='form'>
<Title>Hello Lets Get you Started</Title>
<div className='inputBox'>
<input type='text' required='required' ref={name} />
<span>Your Full Nameeee: </span>
</div>
<div className='input-box'>
<input type='text' required='required' ref={email} />
<span>Your Email: </span>
<i></i>
</div>
<div className='input-box'>
<input type='password' required='required' ref={password} />
<span> Your Password: </span>
</div>
<div className='Links'>
<button className='btn-2 btn' onClick={handleSignIn}>
{' '}
Sign In
</button>
<button className='btn-3 btn' onClick={goHome}>
Return Home
</button>
</div>
<button type='submit' className='btn-1' onClick={handleClick}>
Sign Up{' '}
</button>
</div>
</Box>
</Body>
);
}
export { App };
Here is my solution. Keep styled component outside of Register component.
import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import Home from '../Dashboard/Home';
import App from '../../App';
import Bye from './Login';
import styled from 'styled-components';
const Body = styled.div`
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: black;
`;
const Box = styled.div`
position: relative;
width: 600px;
height: 540px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
&:before {
content: '';
position: absolute;
top: -50px;
left: -50px;
width: 600px;
height: 440px;
transform-origin: bottom right;
background: linear-gradient(
0deg,
transparent,
transparent,
#45f3ff,
#45f3ff
);
animation: animate 6s linear infinite;
}
`;
const Title = styled.h2`
align-items: center;
color: #45f3ff;
font-size: 25px;
font-weight: 500;
`;
function Register() {
const name = useRef();
const email = useRef();
const password = useRef();
const root = ReactDOM.createRoot(document.getElementById('root'));
const handleClick = () => {
if (name.current.value && email.current.value && password.current.value) {
localStorage.setItem('name', name.current.value);
localStorage.setItem('email', email.current.value);
localStorage.setItem('password', password.current.value);
localStorage.setItem('signUp', email.current.value);
alert('Account created successfully!!');
root.render(
<React.StrictMode>
<Home />
</React.StrictMode>
);
}
};
const goHome = () => {
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
};
const handleSignIn = () => {
root.render(
<React.StrictMode>
<Bye />
</React.StrictMode>
);
};
return (
<Body>
<Box>
<div className="form">
<Title>Hello Lets Get you Started</Title>
<div className="inputBox">
<input type="text" required="required" ref={name} />
<span>Your Full Name: </span>
<i></i>
</div>
<div className="inputBox">
<input type="text" required="required" ref={email} />
<span>Your Email: </span>
<i></i>
</div>
<div className="inputBox">
<input type="password" required="required" ref={password} />
<span> Your Password: </span>
<i></i>
</div>
<div class="Links">
<button className="btn-2 btn" onClick={handleSignIn}>
{' '}
Sign In
</button>
<button className="btn-3 btn" onClick={goHome}>
Return Home
</button>
</div>
<button type="submit" className="btn-1" onClick={handleClick}>
Sign Up{' '}
</button>
</div>
</Box>
</Body>
);
}
export default Register;
Hope this help you.
I have a create-react-app where I have say 2 separate components. I want to display part of the Footer component on top the Home component.
My App.js looks like this:
App.js
function App() {
return (
<>
<Home/>
<Footer/>
</>
);
}
export default App;
I want to display the div containing "Our Partners" of the Footer component within the home component.
Footer.js
const Footer = () => {
return (
<section className="footer-section">
<div className="footer-container">
<h2 className="footer-heading">
OUR
<br />
PARTNERS
</h2>
</div>
</section>
);
};
export default Footer;
Footer.css
.footer-section {
padding-right: 25px;
padding-bottom: 30px;
padding-left: 25px;
background-color: #410099;
}
.footer-container {
top: 0;
z-index:999;
margin-top: -250px;
padding-top: 55px;
padding-bottom: 55px;
background-color: #fff;
padding-right: 55px;
padding-left: 55px;
margin-left: auto;
margin-right: auto;
}
.footer-heading {
color: #410099;
margin-top: 0;
margin-bottom: 0;
font-family: sans-serif;
font-size: 45px;
line-height: 1.1;
font-weight: 700;
}
Home.js code is irrelevant but here's the css:
Home.css
.home-section {
padding-top: 140px;
padding-bottom: 300px;
background-image: grey;
background-position: 50% 0;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 300px;
}
What I want to achieve:
What I have achieved (thought negative margin was enough but apparently its not)
How can I fix this issue?
.footer-container {
display: grid;
grid-template-columns: 10% 80% 10%;
align-items: center
}
.footer-border {
width: 50px;
height: 150px;
display: grid;
grid-template-rows: 80% 20%
}
.footer-border-top {
background: purple;
}
.footer-border-bottom {
background: blue
}
.footer-content {
padding-left: 3em;
}
<section class="footer-section">
<div class="footer-container">
<div class="footer-border">
<div class="footer-border-top"></div>
<div class="footer-border-bottom"></div>
</div>
<div class="footer-content">
<h2 class="footer-heading">
OUR
<br /> PARTNERS
</h2>
</div>
<div class="footer-border">
<div class="footer-border-top"></div>
<div class="footer-border-bottom"></div>
</div>
</div>
</section>
there you go :)
BTW, the values are arbitrary (e.g. 'gap: 4em', 'grid-template-rows: 80% 20%'...), feel free to change them if you need to.
How do make my home page responsive? i tried using meta but not working, this is my home.js page which contains what i want to make responsive, needs to add or remove anything?
import React from "react";
import "../css/Home.css";
import { Link } from "react-router-dom"
import logo from '../images/logo2.jpg';
function HomePage(){
return(
<div className="background">
<div className="navbar">
<div className="header"><br />
<img src={logo} alt="logo"/>
<h3>MyChat</h3>
</div>
<nav>
<ul>
<li><input type="text" placeholder="Search News" /></li>
<li><Link to = '/'>HOME</Link></li>
<li><Link to = ''>NEWS</Link></li>
<li><Link to = ''>TIMELINE</Link></li>
<li><Link to = ''>CONTACT</Link></li>
</ul>
</nav>
</div>
<div className = "backform">
<div className="info">
<h2>Make Cool Friends !!!</h2>
<p>Friend Finder is a social network template that can be used to <br />
connect people. The template offers Landing pages, <br />
News Feed, Image/Video Feed, Chat Box, Timeline and lot more. <br /><br />
What are you waiting for? Join Now.
</p>
</div>
<div className="holdback">
<form>
<Link to =''>Login</Link>
<Link to = ''>Register</Link>
</form>
</div>
</div>
</div>
);
}
export default HomePage;
This is my css file for home.js design that contains background, image, navbar, header, text styling and fonts, i tried using meta device display for my css as well but not working.
#font-face {
font-family: 'Pacifico';
src: url('../fonts/Pacifico.ttf');
}
#font-face {
font-family: 'Lobster';
src: url('../fonts/Aladin-Regular.ttf');
}
#font-face {
font-family: 'Neo';
src: url('../fonts/Nunito-SemiBoldItalic.ttf');
}
.background{
background-image: url("../images/home-background1.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 680px;
}
.header{
display: inline-block;
margin: 0 2rem 0 20px;
padding: 0 5rem 10px ;
}
.header h3{
font-size: larger;
font-family: 'Pacifico';
font-stretch: expanded;
color: #764CDF;
margin: 5px 5rem 10px;
padding: 0 5rem;
position: static;
}
.header img{
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: 7rem;
position: absolute;
}
.navbar{
background-color: #5EECFF;
width: 100%;
height: 5rem;
}
.navbar ul{
list-style: none;
float: right;
padding: 0 3rem;
margin: 0;
text-decoration: none;
}
.navbar ul li{
display: inline;
padding: 1rem;
font-size: larger;
font-family: 'Lobster';
}
.navbar ul li input{
border-radius: 10px;
background-color: #F0F0F0;
width: 200px;
height: 20px;
text-indent: 1rem;
transition: width 0.4s ease-in-out;
opacity: 0.5;
font-family: 'Times New Roman', Times, serif;
font-size: small;
}
a:link,
a:hover{
text-decoration: none;
color: white;
}
a:active{
color: #764CDF;
}
a:focus{
color: white;
background-color: #764CDF;
}
.info{
color: white;
padding-left: 15rem;
padding-top: 8rem;
font-family: 'Neo';
}
.backform{
display: inline-flex;
}
.holdback{
margin: 0;
padding-left: 2rem;
margin-left: 5rem;
margin-top: 5rem;
border-radius: 5px;
background-color: #F0F0F0;
width: 500px;
height: 300px;
text-align: left;
display: inline-block;
}
Your CSS must have different styles for each breakpoint you want to make it responsive.
There are two ways to achieve that:
You write it by yourself. As in the comments, there are already several guides for you to learn how to do it. Example
There are some frameworks/libraries out there that people are using it to achieve such thing. It makes our lives easier. You can search and study them and then choose by yourself which one you want to use. To name a few (popular ones), Bootstrap and Tailwind.
When I shrink the page vertically, the flex container become outside the flexbox.
All of my content is supposed to be in the grey area.
I tried to change the height property on css class .App and .App__main, but it doesn't works.
App.js
import "./styles.css";
import Content from "./Content";
export default function App() {
return (
<div className="App">
<div className="App__main">
<Content />
</div>
</div>
);
}
Content.js
import React from "react";
import List from "./List";
import "./styles.css";
export default function Content() {
return (
<>
<div className="layout__container">
<h1 className="layout__container__title">Media</h1>
<List />
</div>
</>
);
}
List.js
import "./styles.css";
import React, { useState } from "react";
export default function List() {
const [list, setList] = useState([
{ id: 1, fileName: "file 1" },
{ id: 2, fileName: "file 2" },
{ id: 3, fileName: "file 3" },
{ id: 4, fileName: "file 4" },
{ id: 5, fileName: "file 5" },
{ id: 6, fileName: "file 6" }
]);
return (
<div className="list">
{list.map((li) => {
return (
<figure title={li.fileName} key={li.id} className={"list__item"}>
<div className="list__item__file">
<div className="list__item__file__name">{li.fileName}</div>
</div>
</figure>
);
})}
</div>
);
}
styles.css
body {
margin: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100vh;
}
.App__main {
display: flex;
height: 100%;
}
/* it's used to save some area for navigation bar */
.App__spacing {
margin-top: 32px;
}
/* list */
.list {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex-grow: 1;
}
.list .list__item {
position: relative;
width: 100px;
height: 100px;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: white;
border: 1px solid white;
overflow: hidden;
flex: 0 0 auto;
}
.list .list__item img {
max-height: 100%;
max-width: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
background-color: #c3c4c7;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
overflow: hidden;
width: 100%;
height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
overflow: hidden;
font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
color: #8c8f94;
font-size: 0.625rem;
text-transform: uppercase;
margin: 0 auto;
}
CodeSandbox:
https://codesandbox.io/s/agitated-dew-rlnw3?file=/src/App.js
The App container with 100vh has a static height and doesn't grow to fit it's content.
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100vh;
}
Use 100% of parent container instead.
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100%;
}
I don't get it. I can't get the grid layout to work in the context below. Anywhere else it works that way. Do you have any idea what could cause this behavior?
I have tried to add unnecessary divs inside the component, alter the grid-area, columns, etc. but nothing works. I have even set up a completely new component to see if grid generally doesn't work in my application but it does and I'm succesfully using it for other components. So it shouldnt be a global problem. It must be something inside this component that prevents it. I don't get it.
My react functional component that is rendered to the screen:
import React from "react";
import "./ReviewPreview.css";
import ReactStars from "react-rating-stars-component";
import { Link } from "react-router-dom";
export default function ReviewPreview(props) {
return (
<div classname="reviewPreviewGrid" style={props.style}>
<div
className="reviewImage"
style={{
backgroundImage: "url(" + props.urlFromParent + ")",
}}
></div>
<Link
className="reviewTitleButton"
style={{ textDecoration: "none" }}
to={`/ReviewDetailed/${props.ratingID}`}
>
{props.children}
</Link>
<p className="reviewAddressSubtitle">{props.addressSubtitle}</p>
<div className="reviewStars">
<ReactStars key={Math.random()} count={5} size={40} activeColor="#0ab3da" edit={false} value={props.value} />
</div>
<div
className="reviewProfilePic"
style={{
backgroundImage: `url(${require("../../assets/profilePlaceholderIcon.svg")})`,
}}
></div>
</div>
);
}
and the corresponding css
.reviewPreviewGrid{
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 215px auto;
grid-template-areas:
"reviewTitleButton ."
"reviewImage reviewAddressSubtitle";
}
.reviewImage {
grid-area: reviewImage;
margin: 0px;
width: 100%;
height: 576px;
background-position: center;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}
.reviewTitleButton {
grid-area: reviewTitleButton;
margin: 0px;
font-family: "Poppins", sans-serif;
font-weight: 800;
font-size: 19px;
color: var(--color-space-cadet);
letter-spacing: -0.023em;
line-height: 22px;
border: 0px;
background-color: transparent;
padding-left: 0px;
}
.reviewAddressSubtitle {
grid: reviewAddressSubtitle;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 11.5px;
color: var(--color-space-cadet);
letter-spacing: 0.02em;
line-height: 12px;
color: rgba(54, 59, 97, 0.51);
text-transform: uppercase;
margin: 0px;
}
.reviewStars {
margin-top: 0px;
}
.reviewProfilePic {
grid: reviewProfilePic;
margin: 0px;
width: 64px;
height: 64px;
background-position: center;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
border-radius: 30pt;
border-style: solid;
border-color: var(--color-space-cadet);
border-width: 1px;
}