Develop Reference

React-bootstrap Alignment Issues

I am currently learning React Bootstrap along with css and trying to execute this style which I am facing currently finding it difficult to manage. Basically aligning project details to right of the project Image.
Here is the image :
here's my code so far for this :
**Projects.js :**
<section className="project" id="project">
<Container>
<Row>
<Col size={12}>
<TrackVisibility>
{({ isVisible }) => (
<div
className={
isVisible ? "animate__animated animate__fadeIn" : ""
}
>
<h2>Projects</h2>
<p></p>
<Col>
{projects.map((project, index) => {
return <ProjectCard key={index} {...project} />;
})}
</Col>
</div>
)}
</TrackVisibility>
</Col>
</Row>
</Container>
<img className="background-image-right" src={colorSharp2}></img>
</section>
**ProjectCard.js :**
export const ProjectCard = ({ title, description, imgUrl, link }) => {
return (
<Col size={12} sm={6} md={4}>
<div className="proj-imgbx">
{description}
<a href={link} style={{ color: "#fff" }} target="_blank">
<img src={imgUrl} />
<div className="proj-txtx">
<h4>{title}</h4>
{/* <span>{description}</span> */}
</div>
</a>
</div>
</Col>
);
};
**CSS for it :**
**Project Card**
.proj-imgbx {
position: relative;
border-radius: 30px;
overflow: hidden;
margin-bottom: 24px;
}
.proj-imgbx::before {
content: "";
background: linear-gradient(90.21deg, #AA367C -5.91%, #4A2FBD 111.58%);
opacity: 0.85;
position: absolute;
width: 100%;
height: 0;
transition: 0.4s ease-in-out;
}
.proj-imgbx:hover::before {
height: 100%;
}
.proj-txtx {
position: absolute;
text-align: center;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.5s ease-in-out;
opacity: 0;
width: 100%;
}
.proj-imgbx:hover .proj-txtx {
top: 50%;
opacity: 1;
}
.proj-txtx h4 {
font-size: 30px;
font-weight: 700;
letter-spacing: 0.8px;
line-height: 1.1em;
}
.proj-txtx span {
font-style: italic;
font-weight: 400;
font-size: 15px;
letter-spacing: 0.8px;
}
.background-image-right {
top: 20%;
position: absolute;
bottom: 0;
width: 35%;
right: 0;
z-index: -4;
}
.project {
padding: 80px 0;
position: relative;
background-color: black;
}
.project h2 {
font-size: 45px;
font-weight: 700;
text-align: center;
}
.project p {
color: #B8B8B8;
font-size: 18px;
letter-spacing: 0.8px;
line-height: 1.5em;
margin: 14px auto 30px auto;
text-align: center;
width: 56%;
}
Any ideas or way that I can achieve what I've listed in image above ? any help would be great for me !
Regards

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 add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0

I have designed my NavLinks using the styled-components. I want to add an active class to the active link I am unable to do it. I tried the isActive property but it did not work, I also tried the activeClassName property but it did not work either. Please suggest to me what should I do to get an active class on the active links with styled components. I am currently using ReactJs version ^18.1.0 and react-router-dom v6.3.0
NavBar.jsx
import {
Nav,
NavLogo,
NavMenu,
Navlink,
LogoutButton,
RegisterButton,
} from "./NavbarDesktopStyles";
const NavBarDesktop = () => {
// links that will disappear when user authenticated
const authLinks = (
<Fragment>
<li>
<RegisterButton to="/">REGISTER</RegisterButton>
</li>
<li>
<Navlink to="/">LOGIN</Navlink>
</li>
</Fragment>
);
// logout button
const logout = (
<Fragment>
<li>
<LogoutButton>LOGOUT</LogoutButton>
</li>
</Fragment>
);
// main navigation
const mainNavigation = (
<Fragment>
<li>
<Navlink to="/">HOME</Navlink>
</li>
<li>
<Navlink to="/service">SERVICE</Navlink>
</li>
<li>
<Navlink to="/">SUBSCRIPTION</Navlink>
</li>
<li>
<Navlink to="/">ABOUT US</Navlink>
</li>
<li>
<Navlink to="/">CONTACT US</Navlink>
</li>
</Fragment>
);
return (
<Nav>
<NavLogo to="/">
<img src="/static/images/slvemongramdarkblue.svg" alt="logo" />
</NavLogo>
<NavMenu>
<ul>
<Fragment>{mainNavigation}</Fragment>
<Fragment>{authLinks}</Fragment>
</ul>
</NavMenu>
</Nav>
);
};
export default NavBarDesktop;
NavBarStyleElemets
export const Nav = styled.nav`
border: 2px solid red;
height: 5.5rem;
display: flex;
padding: 0.5rem 1.5rem;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 10;
`;
export const NavbarContainer = styled.div`
border: 1px solid blue;
padding: 0.5rem 1.5rem;
display: flex;
align-items: center;
flex: 1;
`;
export const NavLogo = styled(Link)`
border: 1px solid green;
text-decoration: none;
img {
width: 4rem;
height: 4rem;
}
`;
export const NavMenu = styled.div`
border: 1px solid blue;
width: 100%;
height: 100%;
display: flex;
flex: 1;
align-items: center;
ul {
display: flex;
flex: 1;
list-style: none;
align-items: center;
gap: 2.5rem;
li:nth-of-type(1) {
margin-left: auto;
}
li:nth-of-type(6) {
margin-left: auto;
}
}
`;
export const Navlink = styled(NavLink)`
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000;
letter-spacing: 0.05rem;
cursor: pointer;
position: relative;
&::after {
content: "";
height: 0.125rem;
background: #1a73e8;
position: absolute;
left: 0;
right: 0;
bottom: -0.375rem;
opacity: 0;
transform-origin: left center;
transition: all 270ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
transform: scaleX(0);
}
&:hover {
color: #1a73e8;
&::after {
transform: scaleX(1);
opacity: 1;
}
}
`;
export const RegisterButton = styled(NavLink)`
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000;
letter-spacing: 0.05rem;
background-color: #1a73e8;
color: #fff;
padding: 0.5rem 1.5rem;
border-radius: 0.62rem;
transition: 270ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
cursor: pointer;
&:hover {
background-color: #135cba;
}
`;
export const LogoutButton = styled.button``;

NavLink has a default class for active routue. Simply go to your index.css/app.css and add a class name (.active) and give your styles. If you are using tailwind then simply add this style.
#tailwind components;
.active {
#apply border-b-2 border-[#888888] no-underline font-bold text-[#888888];
}

Do not directly style the NavLink. Add a child component to NavLink such as <p> and add styles to it.
Then use activeClassName property of NavLink to add active class to it.
<NavLink activeClassName="active" to="/">
<p class="your-class">Home</p>
<NavLink>

Hamburger Transitions not working in react and onClick event too

The aim of my game - to get a hamburger icon to show transition to a cross on click, then when clicked again to revert back to its burger state. But I don't know why it's not working please help!!
I want that my hamburger should show my given transition when I click on it.
App.JSX File
import Navbar from "./Components/Navbar/navbar";
import Intro from "./Components/Intro/intro";
import About from "./Components/About/about";
import Skills from "./Components/Skills/skill";
import Portfolio from "./Components/portfolio/portfolio";
import Contact from "./Components/Contact/contact";
import "./app.scss";
import { useState } from "react";
function App() {
const [menuopen, setMenuOpen] = useState(true);
return (
<div className="app">
{/* //Component Calling */}
<div className="navbar">
{" "}
<Navbar menuopen={menuopen} setMenuOpen={setMenuOpen} />
</div>
<div className="sections">
<Intro />
<About />
<Skills />
<Portfolio />
<Contact />
</div>
</div>
);
}
export default App;
navbar.jsx
import "./navbar.scss";
import PersonIcon from "#material-ui/icons/Person";
import MailIcon from "#material-ui/icons/Mail";
export default function navbar({ menuopen, setMenuOpen }) {
return (
<div className={"navbar" + (menuopen && "active")}>
<div className="wrapper">
<div className="left">
<a href="#intro" className="logo">
nishant.
</a>
<div className="itemContainer">
<PersonIcon className="icon" />
<span>+91 6386 694 7041</span>
</div>
<div className="itemContainer">
<MailIcon className="icon" />
<span>yadavnishant995#gmail.com</span>
</div>
</div>
<div className="right">
<div className="hamburger " onClick={() => setMenuOpen(!menuopen)}>
<span className="line 1"></span>
<span className="line 2"></span>
<span className="line 3"></span>
</div>
</div>
</div>
</div>
);
}
navbar.scss
#import "../../global.scss";
.navbar {
width: 100%;
height: 70px;
background-color: white;
color: $mainColor;
position: fixed;
top: 0;
z-index: 3;
transition: all 1s ease;
.wrapper {
padding: 10px 30px;
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.logo {
font-size: 40px;
font-weight: 700;
text-decoration: none;
color: inherit;
margin-right: 40px;
}
.itemContainer {
display: flex;
align-items: center;
margin-left: 30px;
.icon {
font-size: 18px;
margin-right: 5px;
}
span {
font-size: 15px;
font-weight: 500;
}
}
}
.right {
.hamburger {
width: 32px;
height: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
span {
width: 100%;
height: 3px;
background-color: $mainColor;
transform-origin: left;
transition: all 2s ease;
}
}
}
}
&.active {
background-color: $mainColor;
color: white;
.hamburger {
span {
&:first-child {
background-color: white;
transform: rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:last-child {
background-color: white;
transform: rotate(-45deg);
}
}
}
}
}

As as said, it would be easier to understand your code with a live example, but I suspect it doesn't work because of this:
<div className={"navbar" + (menuopen && "active")}>
When menuopen is false, the className is: "navbarfalse".
When it's true, it becomes: "navbaractive"
You obviously need a space after navbar. I recommend you to write instead:
<div className={`navbar ${menuopen ? "active" : ""}`}>

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.