I am currently working on creating a portfolio website similar to this one.
Check out the Website Here
Typically, when the screen size is reduced to less than half of the full width, the content of a website tends to be hidden rather than shrinking. However, my website continues to shrink. How can I achieve this with CSS?
This is what I have accomplished so far using sass and React.js:
App.scss
$main-container-height: 87vh;
$navbar-height: 13vh;
/* Styles for Navbar */
.navbar {
height: $navbar-height;
text-transform: uppercase;
.name {
text-align: left;
margin-left: 1.5rem;
a {
color: black;
font-size: 25px;
margin: 0 0 0 0.5rem;
text-decoration: none;
}
.box {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
}
.nav-list {
a {
color: black;
margin: 0 1.5rem;
}
a:hover {
color: #519df9;
text-decoration: none;
}
}
}
/* Homepage Styling */
.main-box {
height: $main-container-height;
min-width: 50%;
.left-main-box {
height: $main-container-height;
width: 40vw;
display: inline-block;
background-color: #e8c9c9;
}
.right-main-box {
display: inline-block;
height: $main-container-height;
width: 60vw;
background-color: white;
}
}
HomeMain.js
import React, { Component } from "react";
import CenterBox from "./CenterBox";
import Footer from "./Footer";
export class HomeMain extends Component {
render() {
return (
<div className="main-box">
<div className="left-main-box">left</div>
<div className="right-main-box">right</div>
</div>
);
}
}