Here's my css code:
.wrapper{
background-image: url(../src/img/wallhaven-6qj55q.jpg);
}
.container{
margin: auto;
width: 50%;
padding: 10px;
margin-top: 25vh;
}
and here's my js code:
import './App.css';
import FormBox from './component/FormBox';
function App() {
return (
<div className="wrapper">
<div className="container">
<FormBox />
</div>
</div>
);
}
export default App;
I'm trying to cover the whole background up but it's only doing partical. What is my issue here?
Try min-height 100vh for your wrapper
.wrapper{
background-image: url(../src/img/wallhaven-6qj55q.jpg);
min-height: 100vh;
}
Related
My video is not appearing in each Video element, is there anything wrong with my codes? can anyone help me? Thank you so much!
This is my Video.js:
import React from "react";
import "./Video.css";
function Video() {
return (
<div className="video">
<video src="./video.mp4"> </video>{" "}
</div>
);
}
export default Video;
This is my App.js:
import React from "react";
import Video from "./Video";
import "./App.css";
function App() {
return (
<>
hello code{" "}
<div className="app">
<div className="app-videos">
<Video />
<Video />
<Video />
<Video />
</div>{" "}
</div>{" "}
</>
);
}
export default App;
This is my App.css:
html {
scroll-snap-type: y mandatory;
}
.app {
height: 100vh;
background-color: black;
display: grid;
place-items: center;
}
.app-videos {
position: relative;
height: 800px;
overflow: scroll;
width: 80%;
max-width: 500px;
scroll-snap-type: y mandatory;
}
This is my Video.css:
.video {
position: relative;
border: 5px solid red;
background-color: white;
height: 500px;
width: 100%;
height: 100%;
scroll-snap-align: start;
}
This is my directory:
enter image description here
The video HTML tag has a children <source/>. That accepts the video URL in the src prop.
<video width="320" height="240" controls>
<source src="./video.mp4" type="video/mp4" />
</video>
Refer this link
If someone can let me know if I'm using an improper format in order to load an image on react that would be amazing! I'm not an expert and any advice is greatly appreciated -- thank you in advance. The image that populates when I run the code just shows a broken img icon and when I try to run through the terminal it says that the image is called but not loaded.
import React, { Component } from "react";
import PropTypes from "prop-types";
import Logo from "/Users/mauromartineziii/aqua-financial/src/logo.png";
import "./App.css";
import Photo from "/Users/mauromartineziii/aqua-financial/src/pexels-photo-3560168.jpeg";
class App extends Component {
render() {
return (
<div>
<section>
<header>
<img
src="/Users/mauromartineziii/aqua-financial/src/logo.png"
width="333"
alt="Aqua Financial"
/>
<div>
<ul>
<li>Financial Services</li>
<li>Liquid Capital Asset</li>
<li>Retirement</li>
</ul>
</div>
</header>
</section>
<section id="main">
<img src="Photo"></img>
<div className="main-text">
<span>Learn What An LCA™ Can </span> <br /> Do For You <br />
</div>
<div className="right-text">
<span>Innovation Driven Banking</span>
</div>
<div>
{" "}
<button>Learn More</button>
</div>
</section>
</div>
);
}
}
export default App;
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
section {
margin: 0 120px;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 50px;
}
header div {
margin-left: auto;
font-size: 20px;
}
header ul li {
display: inline-block;
margin: 0 20px;
}
#main {
margin: 0 120px;
margin-top: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
}
#main .main-text {
font-size: 45px;
font-weight: 700;
line-height: 1.5;
}
`
It's a good idea to place the images you use in your project in the project directory and import them with a relative path, e.g:
import Logo from "./logo.png";
You also want to use the the resulting variables for your img tags.
<img
src={Logo}
width="333"
alt="Aqua Financial"
/>
// ...
<img src={Photo} />
At first look at my codes:
JSX:
import React from "react";
import "./styles.scss";
export default function App() {
return (
<div className="App">
<h1> This is a Portfolio Item </h1>
<div className="item-container">
<div className="img-container">
<img
src="https://tf-react-chester.now.sh/images/portfolio-image-5.jpg"
alt="Portfolio 1"
/>
</div>
<h3>This is the Title of Item </h3>
<h4>
This is the description of Item. This is the description of Item.{" "}
</h4>
</div>
</div>
);
}
And CSS(SASS):
.App {
.item-container {
width: 100%;
height:auto;
.img-container {
position: relative;
$margin: 20px;
&::before{
position: absolute;
content: '';
**width: calc(100%-20px);
height: calc(100%-20px);** /* These two line don't work. */
left: 10px;
top: 10px;
background-color: #fff;
transition: all 0.5s ease-in-out;
transform: scaleX(0);
transform-origin: 0;
}
&:hover {
transform: scaleX(1);
}
img{
max-width: 100%;
}
}
}
}
I am trying to create a ::before animated content over the image. But when I am using calc() method it doesn't work at all.
What's the reason?
Note: I have tried some solution to the same problem from StackOverflow but those don't work for me.
This is the codesandbox link:CodeSandBox
Try with spaces ;)
width: calc(100% - 20px);
height: calc(100% - 20px);
I want to add a Floating Action Button (FAB) on my app. Where I want to adjust its width and height to reduce its size using css. Also the button does not show the edit icon inside the button as expected.
Below are the code that I tried,
Code Sandbox
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './profile/profile.css';
import ProfileInfo from './profile/profile';
ReactDOM.render(
<ProfileInfo />,
document.getElementById('root')
);
profile.js
import React from 'react';
import './profile.css';
import Fab from '#material-ui/core/Fab';
import Icon from '#material-ui/core/Icon';
class ProfileInfo extends React.Component{
render(){
return(
<div className='prof-main-container'>
<div className='prof-items-container'>
<div className='prof-pic-container'><img src="https://ik.imagekit.io/upgrad1/upgradlogo.png" className="prof-pic" alt="profile pic" /></div>
<div className='prof-info-data-container'>
<div className='user-name'>User Name</div>
<div className='posts-follows-container'>
{/* <span className='posts-follows-item-first'>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span className='posts-follows-item'>Followed By:6</span> */}
<span>Posts:6</span>
<span className='posts-follows-item'>Follows:4</span>
<span>Followed By:6</span>
</div>
<div className='full-name-container'>
<div className='full-name'>UpGrad Education</div>
<div className='full-name-edit-btn'>
{/* <Button variant="fab" color="secondary" size='medium'>
Edit
</Button> */}
<Fab color="secondary" aria-label="Edit" className='edit-btn'>
<Icon>edit_icon</Icon>
</Fab>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default ProfileInfo
profile.css
.prof-main-container {
display: flex;
background-color: #5995DA; /* Blue */
padding: 20px 0;
}
.prof-items-container {
border: 1px solid #fff;
width: 100%;
display: flex;
/* justify-content: space-around; */
padding: 0% 20%;
/* padding-left: 500px; */
}
.prof-info-data-container{
display: flex;
/* justify-content: space-between; */
flex-direction: column;
margin: 0px 40px;
}
.prof-pic-container{
padding: 15px 0px 0px 0px;
}
.prof-pic{
width: 50px;
height: 50px;
}
.posts-follows-item{
margin: 0px 60px;
}
.posts-follows-container{
font-size: 11px;
margin: 2px 0px;
}
.full-name-container{
display: flex;
flex-direction: row;
}
.full-name{
font-size: 12px;
margin: 10px 0px;
}
.user-name{
font-size: 12px;
font-weight: bold;
margin: 5px 0px;
}
.full-name-edit-btn{
margin: 5px 20px;
}
.edit-btn{
width: 20px;
height: 20px;
}
The expected edit icon is as below.
But actually it is rendering as below. Note that, no edit icon is displaying inside the button as expected instead it is showing "EC" inside the button.Please ignore the background color here.
Also, I should be able to adjust the width and height of the below edit button to reduce its size.But I am not able to do it using css. I tried adding a class named "edit-btn" inside profile.css but it does not work.
Did you try using classes prop instead of className on your Fab element.
According to the documentation you should use the former.
Refer this link for the same :
Material UI FAB props
I have updated my answer. Your .edit-btn class will work fine if you give it more specificity. Refer my code sandbox for the same.
Regarding your <Icon> can you help me understand what is edit_icon?
code sandbox
Do give it a try and see if it works. Also please share what you have tried so far.Thanks!
I apologizes in advance for this stupid question.
I created a series of components using the creat-react-app boilerplate. I imported them into the app.js and they render as expected but if I try move the components on the page using the app.css by giving my components an id tag. Nothing happens.
What am I missing? I thought that once you import the component you can just treat it as another html element on the page.
Again I apologizes for the simple question and grateful for any help.
As requested code:
one of my components;
import React from 'react';
import {Panel, Image} from 'react-bootstrap';
import galaxy from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/galaxy.jpg';
import David from '/Volumes/Main Drive/Test_WebSite_2/src/Assets/David.jpg';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
bootstrapUtils.addStyle(Panel,'main','backgroundImg');
const IntroPanel =()=>(
<div>
<style type="text/css">
{`
.panel-backgroundImg{
width: 300px;
height: 150px;
border: 1px solid gray;
border-radius: 0px;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
}
#background{
position: fixed;
}
.galaxy-background{
width: 298px;
height: 148px;
}
#galaxy-pos{
position: fixed;
left: 1px;
top: 73px;
}
.DavidProp{
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid gray;
box-shadow: 0 0 0 3px white, 0 0 0 4px gray;
}
#DavidPos{
position: fixed;
left: 110px;
top: 185px;
}
.panel-main {
width: 300px;
height: 150px;
border-radius: 0px;
border: 1px solid gray;
padding-bottom: 0px !importnt;
padding-top: 0px !importnt;
right: 200px;
}
#mainPanel{
position: fixed;
top: 222px;
left: 0px;
}
.Name{
font-weight: Bold;
}
#NamePos{
position: fixed;
top: 275px;
left: 95.5px;
}
.Intro{
}
#IntroPos{
position: fixed;
top: 300px;
left: 10.5px;
}
.sighting{
font-style: oblique;
font-size: 14px;
font-weight: Bold;
}
`}
</style>
<div>
<Panel bsStyle="backgroundImg" id="background">
<img src={galaxy} className="galaxy-background" id="galaxy-pos" alt="backgroundImg"/>
</Panel>
<Panel bsStyle="main" id="mainPanel">
<p className="Name" id="NamePos">
David Townsend
</p>
<p className="Intro" id="IntroPos">
"I am a Leaf on the wind, Watch how I soar"
<p>-Wash, <span className="sighting">Serenity</span></p>
</p>
</Panel>
</div>
<div>
<Image src={David} className="DavidProp" id="DavidPos" />
</div>
</div>
);
export default IntroPanel;
Here is the App.js:
import React, { Component } from 'react';
import './App.css';
import MenuBar from './Components/MenuBar.js'
import IntroPanel from './Components/IntroPanel.js'
import AboutPanel from './Components/AboutPanel.js'
class App extends Component {
render() {
return (
<div className="App">
<div>
<MenuBar Name="Inside David Townsend's Brain"
LinkName1="Thoughts" Link1="#"
LinkName2="About" Link2="#"
LinkName3="Ideas" Link3="#"
LinkName4="Resume" Link4="#" />
</div>
<div>
<IntroPanel id="test" />
</div>
<div >
<AboutPanel />
</div>
</div>
);
}
}
export default App;
Here is the App.css:
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-intro {
font-size: large;
}
#keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#test{
position: fixed;
top: 300px;
left: 10.5px;
}
I answered my own question. The answer is in two parts.
I needed to change the css position: fixed; to position: relative;
If I understand it right the css fixed position is basically the world coordinates of the web page and the css relative position is a local coordinate of the parent object.
To move the React component I created a <div> with the created React component inside of it and moved the <div> using CSS.
I have no doubt that there is probably a more elegant way but this is how I solved my issue.