Develop Reference

React Navbar is not aligning horizontally

I am using React to build a Navbar with a Brand logo, Home, Profile, and contact button icons which when hovered upon would animate to their respective texts, 'Home', 'Profile', and 'Contact' respectively.
Currently, my icons are stacked up vertically and are beyond the boundaries of the NavBar and div elements. I have even tried react-bootstrap but am unable to get the desired output.
Here's what I did:
import { Link, NavLink } from 'react-router-dom'
import './index.scss'
import LogoS from '../../../assets/images/taha-logo1.png'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faEnvelope, faHome, faUser } from '#fortawesome/free-solid-svg-icons'
const NavBar = () => (
<div className='nav-bar'>
<Link className='logo' to='/'>
<img src={LogoS} alt="logo" />
</Link>
<nav>
<NavLink exact="true" activeclassname="active" to="/">
<FontAwesomeIcon icon={faHome} color="#4d4d4e" />
</NavLink>
<NavLink exact="true" activeclassname="active" className="about-link" to="/about">
<FontAwesomeIcon icon={faUser} color="#4d4d4e" />
</NavLink>
<NavLink exact="true" activeclassname="active" to="/contact">
<FontAwesomeIcon icon={faEnvelope} color="#4d4d4e" />
</NavLink>
</nav>
</div>
)
export default NavBar
The scss Code is:
.nav-bar{
background: #181818;
width: 100%;
height: 60px;
position: absolute;
top: 0;
z-index: 3;
min-width: 500px;
.logo{
display: block;
padding: 2px 0;
justify-content: left;
img{
display: block;
margin: 8px;
margin-left: 2%;
width: 24px;
height: 80%;
}
}
}
nav {
display: block;
text-align: center;
position: absolute;
height: 100%;
top: 50%;
margin-top: -120px;
width: 210px;
a{
font-size: 22px;
color: #4d4d4e;
display: block;
line-height: 51px;
position: relative;
text-decoration: none;
i{
transition: all 0.3s ease-out;
}
&:hover{
color: #ffd700;
svg{
opacity: 0;
}
&:after{
opacity: 1;
}
}
&:after{
content: '';
font-size: 9px;
letter-spacing: 2px;
position: absolute;
bottom: 0;
display: block;
height: 100%;
text-align: center;
opacity: 0;
transition: all 0.3s ease-out;
}
&:first-child{
&::after{
content: 'HOME';
}
}
}
}

Card position is not on the right side of the web

Please help, I'm just learning how to make Cards using react js. below is the script. when I run it, the position of the card that should be on the right side is still on the left.
how to get div.card to be on the right side?
What's wrong with my code?
1. Services.jsx
import React from 'react'
import './Services.css'
import HeartEmoji from "../../img/heartemoji.png";
import Glasses from "../../img/glasses.png";
import Humble from "../../img/humble.png";
import Resume from './resume.pdf';
import Card from '../Card/Card';
import { themeContext } from '../../Context';
import { useContext } from 'react';
import { motion } from 'framer-motion';
const Services = () => {
const transition = {duration : 2, type: 'spring'}
const theme = useContext(themeContext);
const darkMode = theme.state.darkMode;
return (
<div className="services" id='Services'>
{/* left side */}
<div className="awesome">
<span style={{color: darkMode? 'white': ''}}>My Awesome</span>
<span>services</span>
<spane>
Lorem ispum is simpley dumy text of printing of printing Lorem
<br />
ispum is simpley dummy text of printing
</spane>
<a href={Resume} download>
<button className="button s-button">Download CV</button>
</a>
<div className="blur s-blur1" style={{ background: "#ABF1FF94" }}></div>
</div>
{/* right side */}
<div className="cards">
{/* first card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{left: '14rem'}}
>
<Card
emoji = {HeartEmoji}
heading = {'Design'}
detail = {"Figma, Sketch, Photoshop, Adobe, Adobe xd"}
/>
</motion.div>
{/* second card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{ top: "54rem", left: "10rem" }}
>
<Card
emoji={Glasses}
heading={"Developer"}
detail={"Html, Css, JavaScript, React"}
/>
</motion.div>
{/* 3rd card */}
<motion.div
whileInView={{left: '14rem'}}
initial={{left: '25rem'}}
transition={transition}
style={{ top: "60rem", left: "14rem" }}
>
<Card
emoji={Humble}
heading={"UI/UX"}
detail={
"Lorem ispum dummy text are usually use in section where baalabalalala thank you"
}
/>
</motion.div>
<div className="blur s-blur2" style={{ background: "var(--purple)"}}></div>
</div>
</div>
)
}
export default Services
2. Card.jsx
import React from 'react'
import './Card.css'
const Card = ({emoji, heading, detail}) => {
return (
<div className="card">
<img src={emoji} alt="" />
<span>{heading}</span>
<span>{detail}</span>
<button className="c-button">LEARN MORE</button>
</div>
)
}
export default Card
3. Services.css
.services {
padding: 0 3rem 0 3rem;
display: flex;
height: 90vh;
margin-bottom: 8rem;
margin-top: 9rem;
margin-bottom: 13rem;
}
.awesome{
display: flex;
flex-direction: column;
position: relative;
}
.awesome > :nth-child(1) {
color: var(--black);
font-size: 2.5rem;
font-weight: bold;
}
.awesome > :nth-child(2) {
color: var(--orange);
font-size: 2.5rem;
font-weight: bold;
}
.awesome > :nth-child(3) {
color: var(--gray);
font-size: 14px;
margin-top: 1rem;
}
.s-button{
width: 10rem;
height: 2.5rem;
margin-top: 1rem;
}
.cards>{
position: relative;
}
.cards>*{
position: absolute;
}
/* blur */
.s-blur2 {
left: 14rem;
top: 8rem;
}
.s-blur1 {
top: 13rem;
left: -18rem;
}
#media screen and (max-width: 480px) {
.services{
margin-top: 0;
flex-direction: column;
gap: 5rem;
height: 66rem;
padding: 0;
}
.cards{
display: flex;
flex-direction: column;
gap: 17rem;
}
.cards>*{
position: static;
}
}
4. Card.css
.card {
width: 10rem;
height: 13rem;
position: absolute;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
width: 10rem;
text-align: center;
background: rgba(255, 255, 255, 0.26);
border: 7px solid var(--orangeCard);
box-shadow: var(--boxShadow);
border-radius: 20px;
padding: 0px 26px 2rem 26px;
}
.card span:nth-of-type(2) {
color: var(--gray);
font-size: 16px;
}
.card > img {
transform: scale(0.6);
margin-bottom: -2rem;
}
.c-button {
background: #ffffff;
box-shadow: 0px 19px 60px rgba(0, 0, 0, 0.08);
border-radius: 7px;
border: none;
padding: 10px;
font-size: 16px;
color: #5290FD;
}
#media screen and (max-width: 480px) {
.card{
width: auto;
}
}

i help you to solve the problem, first of all, you can use display flex on your parent and justify content between or evenly, in case of this the parent class is "services", so the code css for className="services" is :
.services {
padding: 0 3rem 0 3rem;
display: flex;
justify-content: evenly;
align-items: center;
height: 90vh;
margin-bottom: 8rem;
margin-top: 9rem;
margin-bottom: 13rem;
}
i hope this can help you :)

How to fix the broken divider of website to the bottom 0

I am developing a website using react. I want to add a divider for all sections. But I can't set its position at bottom 0. It seems like this:
I am using some wrappers. And maybe it's the reason.
I want to add a divider to the "work" section. Here are the files:
work.jsx:
import React, { useState, useEffect } from 'react';
import { AiFillEye, AiFillGithub } from 'react-icons/ai';
import { motion } from 'framer-motion';
import { AppWrap, MotionWrap } from '../../wrapper';
import { urlFor, client } from '../../client';
import './Work.scss';
function Work() {
const [activeFilter, setActiveFilter] = useState('All');
const [animateCard, setAnimateCard] = useState({ y:0, opacity: 1 });
const [works, setWorks] = useState([]);
const [filterWork, setFilterWork] = useState([]);
useEffect(() => {
const query = '*[_type == "works"]'
client.fetch(query).then((data) => {
setWorks(data);
setFilterWork(data);
})
}, [])
const handleWorkFilter = (item) => {
setActiveFilter(item);
setAnimateCard([{ y:100, opacity:0 }])
setTimeout (() => {
setAnimateCard([{ y:0, opacity: 1}])
if(item === 'All') {
setFilterWork(works)
} else {
setFilterWork(works.filter((work) => work.tags.includes(item)))
}
},500)
}
return (
<>
<h2 className="head-text-green">MY PROJECTS</h2>
<div className='app__work-filter'>
{['UI/UX', 'REACT JS', 'HTML', 'JAVACRIPT', 'CSS', 'SCSS', 'ALL'].map((item, index) =>
<div
className={`app__work-filter-item app__flex p-text-green ${activeFilter === item ? "item-active" : ""}`}
key={index}
onClick={() => handleWorkFilter(item)}
>
{item}
</div>
)}
</div>
<motion.div
animate = {animateCard}
transition = {{ duration: 0.5, delayChildren: 0.5 }}
className = 'app__work-portfolio'
>
{filterWork.map((work, index) =>
<div className='app__work-item app__flex' key={index}>
<div className='app__work-img app__flex'>
<img src={urlFor(work.imgUrl)} alt={work.name} />
<motion.div
whileHover={{ opacity: [0,1]}}
transition={{ duration: 0.25, ease: 'easeInOut', staggerChildren: 0.5 }}
className='app__work-hover app__flex'
>
<a href={work.projectLink} target='_blank' rel='noreferrer'>
<motion.div
whileInView={{ scale: [0, 1]}}
whileHover={{ scale: [1, 0.9]}}
transition={{ duration: 0.25 }}
className='app__flex'
>
<AiFillEye />
</motion.div>
</a>
<a href={work.codeLink} target='_blank' rel='noreferrer'>
<motion.div
whileInView={{ scale: [0, 1]}}
whileHover={{ scale: [1, 0.9]}}
transition={{ duration: 0.25 }}
className='app__flex'
>
<AiFillGithub />
</motion.div>
</a>
</motion.div>
</div>
<div className='app__work-content app__flex'>
<h4 className='bold-text-green'>{work.title}</h4>
<p className='p-text' style={{marginTop: 10}}>{work.description}</p>
<div className='app__work-tag app__flex'>
<p className='p-text'>{work.tags[0]}</p>
</div>
</div>
</div>
)}
</motion.div>
<div class="custom-shape-divider-bottom-1657991521">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z" class="shape-fill"></path>
</svg>
</div>
</>
)
}
export default AppWrap(
MotionWrap(Work, 'app__works'),
'work',
'app__grey1bg'
);
work.scss:
.app__works {
flex: 1;
width: 100%;
flex-direction: column;
}
.app__work-filter {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: 4rem 0 2rem;
.app__work-filter-item {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
background-color: #fff;
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
margin: 0.5rem;
&:hover {
background-color: var(--secondary-color);
color: #fff;
}
#media screen and (min-width: 2000px) {
padding: 1rem 2rem;
border-radius: 0.85rem;
}
}
.item-active {
background-color: var(--secondary-color);
color: #fff;
}
}
.app__work-portfolio {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.app__work-item{
width: 270px;
flex-direction: column;
margin: 2rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
color: #000;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
#media screen and (min-width: 2000px) {
width: 470px;
padding: 1.25rem;
border-radius: 0.75rem;
}
#media screen and (max-width: 300px) {
width: 100%;
margin: 1rem;
}
}
}
.app__work-img {
width: 100%;
height: 230px;
position: relative;
img {
width: 100%;
height: 100%;
border-radius: 0.5rem;
object-fit: cover;
}
#media screen and (min-width: 2000px) {
height: 350px;
}
}
.app__work-hover {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
border-radius: 0.5rem;
opacity: 0;
transition: all 0.3s ease;
div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
color: white;
margin: 1rem;
font-family: var(--font-base);
font-weight: 800;
cursor: pointer;
transition: all 0.3s ease;
svg {
width: 50%;
height: 50%;
color: var(--white-color);
}
}
}
.app__work-content {
padding: 0.5rem;
width: 100%;
position: relative;
flex-direction: column;
h4 {
margin-top: 1rem;
line-height: 1.5;
}
.app__work-tag {
position: absolute;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: #fff;
top: -25px;
}
}
.custom-shape-divider-bottom-1657991521 {
position: relative;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-bottom-1657991521 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 58px;
}
.custom-shape-divider-bottom-1657991521 .shape-fill {
fill: #BDD2B6;
}
appWrap.js (it use NavigationDots.jsx with classname="app__navigation" and SocialMedia.jsx with class name= "app__social" ):
import { color } from '#mui/system';
import React from 'react';
import { NavigationDots, SocialMedia } from '../components';
const AppWrap = (Component, idName, classNames) => function HOC() {
return (
<div id={idName} className={`app__container ${classNames}`}>
<SocialMedia />
<div className='app__wrapper app__flex'>
<Component />
<div className='copyright'>
<p className='p-text'>#2022 AYGEN</p>
<p className='p-text'>All rights reserved</p>
</div>
</div>
<NavigationDots active={idName} />
</div>
)
}
export default AppWrap;
MotionWrap.js:
import React from 'react';
import { motion } from 'framer-motion';
const MotionWrap = (Component, classNames) => function HOC() {
return (
<motion.div
whileInView={{ y: [100, 50, 0], opacity: [0, 0, 1] }}
transition={{ duration: 0.5 }}
className={`${classNames} app__flex`}
>
<Component />
</motion.div>
)
}
export default MotionWrap
a part of app.scss file:
.app__social {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
padding: 1rem;
position: initial;
div {
z-index: 5;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
margin: 0.25rem 0;
border: 1px solid var(--lightGray-color);
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
svg {
width: 15px;
height: 15px;
color: var(--green5-color);
}
&:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
svg {
color: var(--white-color);
}
}
#media screen and (min-width: 2000px) {
width: 70px;
height: 70px;
margin: 0.5rem 0;
svg {
width: 30px;
height: 30px;
}
}
}
#media screen and (max-width: 600px) {
justify-content: center;
}
}
.app__navigation {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 1rem;
.app__navigation-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #cbcbcb;
margin: 0.5rem;
transition: background-color 0.2s ease-in-out;
z-index: 5;
&:hover {
background-color: var(--secondary-color);
}
#media screen and (min-width: 2000px) {
width: 20px;
height: 20px;
}
}
}
#media screen and (max-width: 500px) {
.app__navigation,
.app__social {
display: none;
}
.copyright {
padding: 2rem;
}
}
I don't know if any other file is necessary to solve. Thanks in advance.

import { color } from "#mui/system";
import React from "react";
import { NavigationDots, SocialMedia } from "../components";
const AppWrap = (Component, idName, classNames) =>
function HOC() {
return (
<div id={idName} className={`app__container ${classNames}`}>
<SocialMedia />
<div className="app__wrapper app__flex">
<Component />
<div className="copyright">
<p className="p-text">#2022 AYGEN</p>
<p className="p-text">All rights reserved</p>
</div>
<div class="custom-shape-divider-bottom-1657991521">
<svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1200 120"
preserveAspectRatio="none"
>
<path
d="M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z"
class="shape-fill"
></path>
</svg>
</div>
</div>
<NavigationDots active={idName} />
</div>
);
};
export default AppWrap;

React.js Setting State Modifies Website scale

when my component re-renders itself after setState(); it seems to set the wrong scale for the page and all the content seems to fall off the side, it looks like the HTML and CSS has got the wrong screen size, and therefore the images, text, and boxes don't fit the screen, this isn't an issue with my CSS breakpoints or anything but I don't understand what I need to do since i've never seen this before
Before re-render:
after re-render:
MoviesHome.js
constructor(props){
super(props)
this.state = {
slideUpClass: ['movieFullTabContainer', 'movieFullTabContainerClosed'],
isOpen: 0,
};
handleMovieClick = () => {
if(this.state.isOpen === 0){
this.setState({isOpen: 1});
}else{
this.setState({isOpen: 0});
}
}
...
<div className='rowsContainer'>
<div className='rowContent'>
{this.state.Trending != null ? <MoviesRow clickHandler={this.handleMovieClick} name={'For You'} index={0} movies={this.state.Trending}/> : ''}
{this.state.Trending != null ? <MoviesRow clickHandler={this.handleMovieClick} name={'Trending'} index={1} movies={this.state.Trending}/> : ''}
</div>
</div>
<MovieSlideUp clickHandler={this.handleMovieClick} slideupClass={this.state.slideUpClass[this.state.isOpen]}/>
MoviesRow.js
<div key={Math.random(0, 1000)} onClick={() => this.props.clickHandler()} className='sliderItem'>
<img className='sliderImg' src={`https://image.tmdb.org/t/p/w1280/${this.props.movies[i].poster_path}`} alt=''></img>
<div className='movieOverlayContainer'>
<div className='movieOverlayContainerContent'>
<p className='movieTitle'>{this.props.movies[i].title}</p>
<p>{this.props.movies[i].release_date.substring(0,4)}</p>
</div>
</div>
</div>
MovieFullTab.js
import CircleSVG from './SVG/Circle-Solid.svg';
import StarSVG from './SVG/Star-Solid.svg';
import HeartSVG from './SVG/Heart-Solid.svg';
import PlaySVG from './SVG/Play-Solid.svg';
...
<div id={this.props.slideupClass}>
<div onClick={() => this.props.clickHandler()} id='fullscreenTabContainer'>
<div id='fullscreenSurroundingContainer'>
<div id='fullscreenContent'>
<div id='movieInfoContainer'>
<div id='movieImageContainer'>
<img src='https://image.tmdb.org/t/p/w1280/jTswp6KyDYKtvC52GbHagrZbGvD.jpg'></img>
</div>
<div id='movieFullInfoContainer'>
<p id='movieFullInfoTitle'>Luca</p>
<p className='movieFullInfoText'>15</p>
<p className='movieFullInfoText'>2021</p>
<div id='fullGenreContainer'>
<p>Adventure</p>
<img alt='' className='seperator-side' src={CircleSVG}></img>
<p id='secondGenre'>Comedy</p>
</div>
<div id='movieFullRatingsContainer'>
<img id='featuredStarIcon' alt='' src={StarSVG}></img>
<p>8.6</p>
</div>
<div id='fullMovieInfoOverviewContainer'>
<p>Luca and his best friend Alberto experience an unforgettable summer on the Italian Riviera.
But all the fun is threatened by a deeply-held secret: they are sea monsters from another
world just below the water’s surface</p>
</div>
<div id='movieFullInfoButtonsContainer'>
<div id='movieFullInfoLikeButton'>
<img alt='' src={HeartSVG}></img>
</div>
<div id='movieFullInfoPlayButton'>
<p>Watch</p>
<img alt='' src={PlaySVG}></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
MoviesRow.css
.rowTopContainer{
display: flex;
align-items: baseline;
}
.ArrowButtonImage{
filter: invert(65%) sepia(5%) saturate(170%) hue-rotate(169deg) brightness(84%) contrast(82%);
}
.flippedArrow{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.buttonSlideContainer{
display: flex;
margin-left: auto;
}
.ButtonSlide:first-child{
margin-right: 35px;
}
.ButtonSlide{
width: 30px;
height: 25px;
cursor: pointer;
}
.movieRowTitleContainer{
margin-right: 20px;
}
.movieRowTitle{
color: white;
font-family: Bold;
font-size: 23px;
margin-bottom: 25px;
}
.viewAllButtonContainer {
cursor: pointer;
}
.viewAllButtonContainer:hover p {
text-decoration: underline;
}
.viewAllButtonContainer p {
color: white;
font-size: 0.9em;
}
.moviesRowSliderContainer{
display: flex;
overflow-x: hidden;
overflow: hidden;
width: 100%;
scroll-behavior: smooth;
}
.sliderItemContent:hover .movieOverlayContainer{
opacity: 1;
background-color: rgba(0, 0, 0, 0.61);
}
.sliderImg{
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}
.movieOverlayContainerContent{
position: relative;
top: 0;
left: 0;
text-align: center;
justify-content: flex-start;
display: flex;
flex-direction: column;
height: 90%;
width: 100%;
}
.movieOverlayContainerContent p:nth-child(2){
font-size: 1vw;
}
.movieTitle{
font-size: 1.4vw;
width: 80%;
margin-bottom: 5px;
margin: 0 auto;
margin-top: 5px;
font-family: Bold;
}
.movieShortInfoContainer{
margin-top: auto;
}
.movieShortInfoContent{
justify-content: center;
display: flex;
text-align: center;
margin-top: auto;
}
.movieShortInfoContent p:not(:first-child) {
/* margin-left: 15px; */
font-size: 0.9vw;
}
.movieShortInfoContent p:nth-child(3){
margin-left: 0;
}
.movieShortInfoContent p:nth-child(2){
margin-right: 15px;
}
.movieStarIcon{
height: 15px;
filter: invert(68%) sepia(95%) saturate(406%) hue-rotate(359deg) brightness(104%) contrast(88%);
}
.userRatingsContainer{
display: flex;
align-items: center;
}
.movieOverlayContainer {
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background-color: rgba(0, 0, 0, 0);
border-radius: 5px;
opacity: 0;
color: white;
transition: all 0.1s ease;
}
.sliderItem{
width: 19%;
height: auto;
flex:none;
position: relative;
}
.sliderItemContent{
height: 100%;
width: 80%;
cursor: pointer;
}
#media only screen and (max-width: 1400px) {
.sliderItem{
width: 18%;
}
}
#media only screen and (max-width: 650px) {
.sliderItem{
width: 38%;
}
.movieOverlayContainerContent p:nth-child(2){
font-size: 1.8vw;
}
}
#media only screen and (max-width: 550px) {
.movieTitle{
font-size: 3vw;
}
}
I Hope the code helps :)

It was simply the display: flex; container pushing the container, props to Drew Reese for helping resolve the issue... Thanks :)

html elements (JSX code) keeps on moving when my webpage is resized

I'm creating the following website using react.js and this is how it looks before it is resized:
screen_shot_website_before_resizing
But when I resize it vertically or diagonally, all of the elements go all over the place in the 'availability search bar' and for the options in the navbar as you can see below:
screen_shot_website_after_resizing
screenshots that I took are from the homepage of my website. The code for the homepage is as follows:
import React from 'react'
import background from './images/backgroundOption2.png'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faAngleDown, faCalendar } from '#fortawesome/free-solid-svg-icons'
const HomePage = () => {
return (
<>
<div className="homepage-picture-container" >
<img src={background} alt="intro_image" />
</div>
<div className="check-availabilty-container">
<div>
<h3>Check Availability</h3>
</div>
<div id="availability-search-container">
<div id="availability-search-sub-container">
<div className="room-and-occupancy">
<div className="occupacy-paragraph-container">
<p>Occupancy</p>
</div>
<div className="line-icon-container">
<div className="line">
<p id="room-number-input">1</p>
<p id="room-paragraph">Room</p>
<p id="adults-number-input">2</p>
<p id="adults-paragraph">Adult</p>
<p id="children-number-input">1</p>
<p id="children-paragraph" >Child</p>
</div>
<div id="icon-availability-search-occupancy"><FontAwesomeIcon icon={faAngleDown} /></div>
</div>
</div>
<div className="check-in-out-date-container">
<div className="check-in-paragraph">
<p>Check-in</p>
</div>
<div className="check-out-paragraph">
<p>Check-out</p>
</div>
<div className="line-icon-container">
<div className="calender-icon-container"> <FontAwesomeIcon icon={faCalendar} /> </div>
<div className="line" id="line-spacing-for-calender-icon"><p id="check-in-date">03/12/2021</p><p id="check-out-date" >03/13/2021</p></div>
<div id="icon-availability-search-check-ins-outs" ><FontAwesomeIcon icon={faAngleDown} /></div>
</div>
</div>
<div className="special-rates-container">
<div className="specials-rates-paragraph">
<p>Special Rates</p>
</div>
<div className="line-icon-container">
<div className="line" id="spacing-for-special-rates"><p id="check-in-date">Lowest Available Rate</p></div>
<div id="icon-availability-search-check-ins-outs" ><FontAwesomeIcon icon={faAngleDown} /></div>
</div>
</div>
<div className="button-search">
<p>SEARCH</p>
</div>
</div>
</div>
</div>
</>
)
}
export default HomePage
Here's my css code:
:root {
--navBar-border: whitesmoke solid 2px;
--navBar-width: 10%;
--onPage-borders: rgb(221, 216, 216) solid 0.5px;
--button-color1: rgba(10, 93, 248, 0.864);
--button-color2: rgb(247, 179, 52);
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
/* font-family: "Montserrat", sans-serif; */
font-family: "Shippori Mincho B1", serif;
position: relative;
text-decoration: none;
color: grey;
/* font-size: 15px; */
}
.adjust-elements {
min-width: 900px;
min-height: 900px;
}
a {
color: grey;
margin: 20px;
font-size: 60%;
transition: 0.1s ease-in-out;
/* border: black solid 5px; */
}
/* navbar */
.navbar {
border: var(--navBar-border);
border-left: none;
border-right: none;
height: 90px;
width: 100%;
position: fixed;
background-color: whitesmoke;
z-index: 5;
}
.rooms-container {
position: relative;
width: 4%;
float: left;
top: 0;
}
.room-options {
position: absolute;
float: left;
width: 100%;
}
.room-options-hide {
display: hide;
position: absolute;
float: left;
width: 100%;
visibility: hidden;
}
.room-options ul li {
list-style: none;
}
.room-options-hide ul li {
list-style: none;
}
.reservation-and-booking-container {
position: relative;
width: 10%;
height: 20%;
float: left;
top: 0;
}
.reservation-and-booking-options {
position: absolute;
float: left;
width: 300%;
}
.reservation-and-booking-options ul li {
list-style: none;
}
.hide-reservation-and-booking-options ul li {
list-style: none;
}
.hide-reservation-and-booking-options {
position: relative;
width: 5%;
float: left;
top: 0;
visibility: hidden;
}
.gallery-container {
position: relative;
width: 5%;
float: left;
top: 0;
}
.gallery-options {
position: absolute;
float: left;
width: 188%;
}
.gallery-options ul li {
list-style: none;
}
.hide-gallery-options ul li {
list-style: none;
}
.hide-gallery-options {
position: relative;
width: 5%;
float: left;
top: 0;
visibility: hidden;
}
.link-divs {
width: 4%;
float: left;
top: 0;
}
#drop-down-1 {
position: relative;
}
#drop-down-rooms {
position: absolute;
width: 100%;
border: black solid 2px;
}
#drop-down-rooms li {
list-style: none;
}
a:hover {
transition: 0.2s ease-in-out;
color: orange;
}
.wrapper {
height: 90px;
width: 100%;
}
.link-container {
justify-content: space-around;
top: 60%;
left: 50%;
bottom: 0;
width: 100%;
}
#logo-container {
width: 20%;
height: 100%;
position: absolute;
}
#logo-container img {
border: var(--navBar-border);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -30%);
}
/* homepage */
.homepage-picture-container {
position: relative;
margin: 0;
background: no-repeat center center;
background-size: cover;
height: 45vh;
display: inline-block;
width: 100%;
}
.homepage-picture-container img {
height: 100%;
width: 100%;
grid-template: repeat(auto-fit);
}
/* homepage-availabilty search */
.line {
border: var(--onPage-borders);
margin-top: 1vh;
border-top: none;
margin-top: 3.5vh;
border-left: none;
border-right: none;
margin-right: 3vh;
margin-left: 1vh;
height: 25px;
}
.line-icon-container {
position: absolute;
bottom: -1vh;
width: 100%;
justify-content: space-evenly;
}
#line-spacing-for-calender-icon {
margin-left: 5vh;
}
#icon-availability-search-occupancy {
transform: translate(-1vh, -2.5vh);
float: right;
}
#icon-availability-search-check-ins-outs {
transform: translate(-0.6vh, -2.5vh);
float: right;
}
.room-and-occupancy {
border: var(--onPage-borders);
margin-left: 1.5vh;
margin-top: 0;
width: 30%;
padding: 0;
height: 100%;
float: left;
}
.occupacy-paragraph-container {
float: left;
bottom: 0px;
}
.room-and-occupancy p {
margin-top: 0.3vh;
font-size: 1.8vh;
margin-left: 1vh;
}
.welcome-container {
margin-top: 1vh;
color: whitesmoke;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
}
.homepage-picture-container h2 {
color: whitesmoke;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-container {
position: relative;
margin: 0 auto;
}
.about-container {
/* visibility: hidden; */
}
.check-availabilty-container {
display: inline-block;
position: relative;
width: 100%;
height: 45vh;
margin: 0;
}
#availability-search-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -125%);
/* min-width: 70%; */
border: var(--onPage-borders);
/* max-height: 6px; */
/* min-height: 21%; */
height: 20%;
border-radius: 2vh;
min-width: 1000px;
}
#availability-search-sub-container {
justify-content: space-around;
transform: scale(0.98, 0.85);
height: 100%;
width: 100%;
}
.check-in-out-date-container {
float: left;
border: var(--onPage-borders);
margin-left: 0;
margin-top: 0;
width: 25%;
padding: 0;
height: 100%;
float: left;
border-left: none;
}
.special-rates-container {
float: left;
border: var(--onPage-borders);
margin-left: 0;
margin-top: 0;
width: 25%;
padding: 0;
height: 100%;
float: left;
border-left: none;
}
.button-search {
float: left;
border: var(--onPage-borders);
margin-left: 0;
margin-top: 0;
width: 18%;
padding: 0;
height: 100%;
float: left;
margin-right: 0.1vh;
position: relative;
background: var(--button-color2);
border: var(--button-color2);
border-radius: 1vh;
}
.button-search p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.specials-rates-paragraph {
float: left;
margin-bottom: 0px;
margin-left: 2vh;
}
#spacing-for-special-rates {
margin-left: 2vh;
}
.check-in-paragraph {
float: left;
margin-bottom: 0px;
margin-left: 5vh;
}
#check-in-date {
float: left;
}
#adults-paragraph {
float: left;
transform: translateX(5vh);
}
#adults-number-input {
float: left;
transform: translateX(5vh);
}
#room-paragraph {
float: left;
}
#room-number-input {
float: left;
}
#children-paragraph {
transform: translateX(-1vh);
float: right;
}
#children-number-input {
transform: translateX(-9vh);
float: right;
}
#check-out-date {
transform: translateX(-0.5vh);
float: right;
}
.check-out-paragraph {
margin-bottom: 0px;
float: right;
margin-right: 4.1vh;
}
.calender-icon-container {
transform: translateY(2.8vh);
float: left;
margin-left: 2vh;
margin-top: 0.5vh;
}
h1 {
text-align: center;
position: relative;
}
h3 {
margin-top: 2.5vh;
text-align: center;
position: relative;
font-size: 3vh;
}
#blocker {
border: black solid 2px;
}
And here's my code for the navbar:
import React, { useState, useEffect } from 'react';
import { Link} from 'react-router-dom';
const NavBar = () => {
const [isRoomOptionsOpen, setIsRoomOptionsOpen] = useState(false);
const [isReservationAndBookingOpen, setIsReservationAndBookingOpen] = useState(false)
const [isGalleryOpen, setIsGalleryOpen] = useState(false);
const [scrollPosition, setScrollPosition] = useState(0)
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
console.log(scrollPosition)
}
useEffect(() => {
window.addEventListener('scroll', handleScroll, { passive: true })
return () => {
window.removeEventListener('scroll', handleScroll)
}
}, [scrollPosition]);
return (
<>
<div className="adjust-elements">
<div className="wrapper">
<div className="navbar" >
<div id="logo-container">
<img src="/images/logo.png" alt="" width="120px" />
</div>
<div className="link-container">
<div className="link-divs">
<Link to="/">HOME</Link>
</div>
<div className="link-divs">
<Link to="/about">ABOUT</Link>
</div>
{isRoomOptionsOpen ?
<>
<div className="rooms-container" onMouseEnter={() => setIsRoomOptionsOpen(!isRoomOptionsOpen)} onMouseLeave={() => setIsRoomOptionsOpen(!isRoomOptionsOpen)}>
<a onClick={() => setIsRoomOptionsOpen(!isRoomOptionsOpen)}>ROOMS</a>
<div className="room-options">
<ul>
<li>
<Link to="/about">ALL</Link>
</li>
<li>
<Link to="/about">PREMIUM</Link>
</li>
<li>
<Link to="/about">DELUX</Link>
</li>
<li>
<Link to="/about">COTTAGE</Link>
</li>
</ul>
</div>
</div>
</>
:
<div className="rooms-container">
<a onClick={() => setIsRoomOptionsOpen(!isRoomOptionsOpen)}>ROOMS</a>
<div className="room-options-hide">
<ul>
<li>
<Link to="/about">ALL</Link>
</li>
<li>
<Link to="/about">PREMIUM</Link>
</li>
<li>
<Link to="/about">DELUX</Link>
</li>
<li>
<Link to="/about">COTTAGE</Link>
</li>
</ul>
</div>
</div>
}
{isReservationAndBookingOpen ?
<>
<div className="reservation-and-booking-container" onMouseEnter={() => setIsReservationAndBookingOpen(!isReservationAndBookingOpen)} onMouseLeave={() => { setIsReservationAndBookingOpen(!isReservationAndBookingOpen) }} >
<a onClick={() => setIsReservationAndBookingOpen(!isReservationAndBookingOpen)}>RESERVATION/BOOKING</a>
<div className="reservation-and-booking-options">
<ul>
<li>
<Link to="/about">MAKE A RESERVATION</Link>
</li>
<li>
<Link to="/about">MY BOOKING</Link>
</li>
</ul>
</div>
</div>
</>
:
<div className="reservation-and-booking-container">
<a onClick={() => setIsReservationAndBookingOpen(!isReservationAndBookingOpen)}>RESERVATION/BOOKING </a>
<div className="hide-reservation-and-booking-options">
<ul>
<li>
<Link to="/about">MAKE A RESERVATION</Link>
</li>
<li>
<Link to="/about">MY BOOKING</Link>
</li>
</ul>
</div>
</div>
}
{isGalleryOpen ?
<>
<div className="gallery-container" onMouseEnter={() => setIsGalleryOpen(!isGalleryOpen)} onMouseLeave={() => { setIsGalleryOpen(!isGalleryOpen) }} >
<a onClick={() => setIsGalleryOpen(!isGalleryOpen)}>GALLERY</a>
<div className="gallery-options">
<ul>
<li>
<Link to="/about">THE PROPERTY</Link>
</li>
<li>
<Link to="/about">FOOD</Link>
</li>
</ul>
</div>
</div>
</>
:
<div className="gallery-container">
<a onClick={() => setIsGalleryOpen(!isGalleryOpen)}>GALLERY</a>
<div className="hide-gallery-options">
<ul>
<li>
<Link to="/about">THE PROPERTY</Link>
</li>
<li>
<Link to="/about">FOOD</Link>
</li>
</ul>
</div>
</div>
}
<div className="link-divs">
<Link to="/contact">CONTACT</Link>
</div>
</div>
</div>
</div>
{/* <div id="blocker"></div> */}
{/* <div className="wrapper">
<div className="navbar" >
<div className="link-container">
<Link to="/">HOME</Link>
<Link to="/about">ABOUT</Link>
<i class="fas fa-chevron-down"></i>
<a ClassName="link-style">ROOM <FontAwesomeIcon icon={faAngleDown} /> </a>
<Link to="/reservation">RESERVATION <FontAwesomeIcon icon={faAngleDown} /> </Link>
<Link to="/gallery">PHOTO GALLERY <FontAwesomeIcon icon={faAngleDown} /> </Link>
<Link to="/contact"> CONTACT </Link>
<Link to="/policy">POLICY</Link>
</div>
</div>
</div> */}
</div>
</>
)
}
export default NavBar
What's working is if I set min-width: 1000px for the availability-search-container , if I minimize the webpage horizontally, the elements stay in place. What I want is to prevent the disorganization of my webpage (as seen in the second screenshot) when it is minimized vertically, horizontally, and diagonally, and have the elements either stay put or auto-adjust according to the size of the webpage when minimized. How do I do that?
And here's a link to my project on codesandbox, if anyone wants to interact with it: https://codesandbox.io/s/clr-website-xyogn.

If I understand you correctly, the element that is wrong is .check-availabilty-container. If so, then use min-height instead of height.