I wonder how to scroll one section to another using React, just like this web: https://www.stevenmengin.com/
Is there any specific technique I can use? or it is possible to do that using React Framer Motion? What kind of keyword shoud I use for googling it?
The idea is here i believe. Try search for Full Page Scroll https://codepen.io/Online-web-ustaad/pen/oVxVgB
*, ::before, ::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
overflow: hidden;
display: flex;
height: 100vh;
flex-direction: column;
line-height: 1.5;
font-family: 'Roboto Condensed', sans-serif;
font-size: 62.5%;
color: #f4f4f4;
background-color: #1d1e22;
}
.scrolls {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1.25em;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 2rem;
color: #f4f4f4;
}
.scrolls .center {
font-size: 0.825rem;
}
.smooth {
position: relative;
width: 100%;
height: 100%;
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
.header {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
min-height: 60px;
font-size: 1rem;
background-image: linear-gradient(180deg, #1d1e22, rgba(29, 30, 34, 0.1), transparent);
mix-blend-mode: luminosity;
}
.header ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
width: 100%;
justify-content: center;
}
.header ul li {
margin: 0 1em;
padding: 1em;
}
.header ul li a {
position: relative;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #f4f4f4;
}
.header ul li a::after {
position: absolute;
bottom: -3px;
left: 0;
content: '';
width: 0;
height: 3px;
transition: all 0.2s linear;
}
.header ul li a:hover::after {
width: 100%;
background-color: #f4f4f4;
}
section {
position: relative;
display: flex;
width: 100%;
min-height: 100vh;
flex-flow: column wrap;
align-items: center;
justify-content: center;
font-size: 1rem;
background-color: #f4f4f4;
background-image: url(https://i.postimg.cc/15R3qZR2/london-3841024-1920.jpg);
background-size: cover;
scroll-snap-align: center;
}
section h2 {
text-transform: uppercase;
font-size: 3.25rem;
font-weight: 900;
padding: 0.5em 1em;
color: #1d1e22;
background-color: #f4f4f4;
mix-blend-mode: screen;
border-radius: 0.25em;
pointer-events: none;
user-select: none;
}
section:nth-child(2) {
background-image: url(https://i.postimg.cc/y8dxwCwc/balloons-388973-960-720.jpg);
}
section:nth-child(3) {
background-image: url(https://i.postimg.cc/bYWmGqRN/2.jpg);
}
section:nth-child(4) {
background-image: url(https://i.postimg.cc/VLPjQvRM/4.jpg);
}
.social
{
position:fixed;
bottom:20px;
right:20px;
background:red;
font-family:verdana;
padding:5px;
border-radius:5px;
animation:new .5s linear infinite;
margin-top:-50px;
}
.social a
{
text-decoration:none;
color:#fff;
font-size:18px;
}
#keyframes new
{
0%
{
transform:scaleX(1);
}
50%
{
transform:scaleX(.95);
}
100%
{
transform:scaleX(1);
}
}
Commenting out the import statement pointing to this css file is the difference between my app building and not building. This is the only css file that does this. I even tried removing the :root custom variables and hardcoding the values.
:root {
--font-size-a: 1.25rem;
--font-size-b: 0.9rem;
--font-size-c: 0.5rem;
--font-size-d: 0.35rem;
--scoresheet-border: 2px solid #222;
}
[data-font-size="A"] {
font-size: var(--font-size-a);
}
[data-font-size="B"] {
font-size: var(--font-size-b);
line-height: 80%;
}
[data-font-size="C"] {
font-size: var(--font-size-c);
}
[data-font-size="D"] {
font-size: var(--font-size-d);
letter-spacing: -1px;
line-height: 80%;
}
.scoresheet-container {
border: 4px solid #333;
background-color: #e4e4e4;
max-width: min-content;
padding: 0 1rem 1rem;
position: relative;
}
.scoresheet-container .scoresheet-top {
width: 100%;
display: inline-flex;
padding: 0.5rem 0.75rem;
}
.scoresheet-container .scoresheet-top .player-name {
flex-basis: 100%;
display: flex;
gap: 0.5rem;
}
.scoresheet-container .scoresheet-top .player-name h5 {
align-self: flex-end;
margin-bottom: 0.5rem;
}
.scoresheet-container .scoresheet-top .player-name-slot {
flex-basis: 80%;
border-bottom: 2px solid black;
display: flex;
place-items: center;
justify-content: center;
}
.scoresheet-container .scoresheet-top .player-name-slot p {
font-size: clamp(1rem, 2rem);
font-weight: bold;
}
.scoresheet[data-layout="horizontal"] {
border: var(--scoresheet-border);
display: flex;
align-items: flex-start;
flex-direction: row;
gap: 0.25rem;
}
.scoresheet[data-layout="vertical"] {
border: var(--scoresheet-border);
display: flex;
/* align-items: flex-start; */
flex-direction: column;
gap: 0.75rem;
}
.scoresheet-section {
width: 400px;
font-weight: bold;
display: grid;
grid-template-rows: 1fr;
display: flex;
flex-direction: column;
margin: 2px;
border: var(--scoresheet-border);
}
.scoresheet-section header {
border-bottom: var(--scoresheet-border);
}
.scoresheet-section-header .header-cell:not(:first-child) {
justify-content: center;
}
.scoresheet-section-header {
background-color: #666;
color: #fff;
}
.scoresheet-row {
display: flex;
max-height: 2rem;
justify-content: center;
}
.scoresheet-row :first-child {
padding-left: 0.25rem;
}
.scoresheet-row:not(:last-of-type) {
border-bottom: var(--scoresheet-border);
}
.scoresheet-row > * {
display: flex;
justify-content: center;
align-items: center;
}
.scoresheet-row .header-cell {
justify-content: flex-start;
}
.scoresheet-row > :not(:last-child) {
border-right: var(--scoresheet-border);
/* background-color: green; */
}
.scoring-option-label {
flex-basis: 45%;
}
.how-to-score {
flex-basis: 30%;
text-align: center;
}
.how-to-score:not(.header-cell) {
line-height: 12px;
}
.points-scored {
/* flex-grow: 1; */
flex-basis: 25%;
}
.points-scored.total {
background-color: #ccc;
}
.scoring-option .points-scored:not(.locked):hover {
cursor: pointer;
}
.points-scored.selected {
background-color: #b52717;
color: #eee;
}
svg.right-arrow {
max-height: 1.5rem;
max-width: min-content;
}
.scoring-option-label img {
margin-left: auto;
margin-right: 1rem;
border: 1px solid black;
border-radius: 8%;
}
/* .scoresheet-row p {
margin-right: 0.5rem;
} */
.header-cell.scoresheet-row > p {
margin: auto 0;
}
.scoresheet-row p ~ span {
text-align: center;
}
.scoresheet-cell {
display: flex;
gap: min(10%, 0.5rem);
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
#takeScoreMessage {
display: flex;
place-items: center;
gap: 0.75rem;
position: absolute;
top: 40%;
left: 103%;
font-size: 2rem;
font-family: "Righteous", cursive;
font-weight: bold;
color: goldenrod;
text-shadow: -1px 2px 2px #333;
/* bottom: 0; */
/* visibility: visible; */
}
This is the error when I run npm run heroku-postbuild to more quickly check if it would fail pushing it up to Heroku:
Creating an optimized production build...
Failed to compile.
TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at Array.some (<anonymous>)
at runMicrotasks (<anonymous>)
There isn't a single toLowerCase() in the code I wrote, so I have NO idea where it is or how to find it. Again, simply commenting out the import statement pointed at the above css file fixes EVERYTHING. At this point, I'm commenting out each block of code and testing to pinpoint the specific line responsible, but I'm tired of solving a styling issue while building a fullstack application. I got this far... let me know if you can help!
i am a complete begginer trying to make a responsive react app. My problem is that media queries don't work, and i can't figure out why.
$main-color: #b282ff;
$darker-main-color: #8A42FF;
$shadow-color: #d9c2ff;
$accent-color: #E8FFC2;
$main-font: "Libre Bakersville";
$secondary-font: "Bebas Neue";
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 2em;
font-family: "Bebas Neue";
}
.navbar-container {
display: flex;
flex-direction: row;
align-items: center;
height: 10vw;
width: auto;
background: $main-color;
padding: 16px;
ul {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
font-size: 2rem;
position: relative;
height: 100%;
li {
padding: 0 60px 0 60px;
list-style: none;
}
}
a{
color: white;
text-decoration: none;
&:visited {
color: white;
}
}
}
.navbar-menu-toggle{
display: none;
position: absolute;
padding: 10px;
color: #fff;
}
.navbar-logo {
font-size: 3rem;
a{
color: white;
text-decoration: none;
&:visited {
color: white;
}
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
#media screen and (max-width:500px) {
.navbar-container{
flex-direction: column;
height: auto;
}
}
here is my scss. what i am trying to do is to make the list in the menu to display as a column istead of a row. While tdebugging i tried to switch the media queruies statements, just so it changes the background color, but it also did not work. What can i do?
Note: becasue I am a new user, I cannot embed photos yet. The photos are in links generated by Stack overflow below.
The below is the design I am trying to achieve,
However, the below is currently what is happening
As you can see, the sidebar list is appearing to go outside the sidebar itself when the padding is added.
How can I manipulate my CSS to alter?
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 250px;
background-color: white;
border-right: 1px solid;
padding-left: 15px;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
border-right: 1px solid;
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 40px;
padding-top: 25px;
}
There's a weird bug in my application to causes some CSS properties to disappear. When I sign-in into my application, I used <Redirect to="/home"/> to go to my home page. And then some images disappear and some button are half the size they suppose to be. When I refresh the browser, page gets back to what it supposes to be. I'm using styled component mainly, and below are some pictures:
after signin, wrong version
after refresh page, correct version
here is the complete codehttps://github.com/aojiaooo/shopaholic-react-app
To run the code, you have to change SignIn.js function below:
async function loginUser(credentials) {
return "someRandomCookieOfYourChoice";
//below was the original request to backend
/**
return await axios.post('http://localhost:8080/signin', credentials)
.then(response => response.data.code === 0 ? response.data.data.value : null);
*/
}
Have being frustrated the whole day ... Any help would be greatly appreciated. I'm a backend guy and this is my first day trying out React. Thanks in advance!
import styled from "styled-components";
import { Link } from "react-router-dom";
//general layout for shopaholic
export const SectionWrapper = styled.section`
box-shadow: 0 0 5px #ccc;
padding: 15px 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
`
// style for header
export const HeaderWrapper = styled.header`
min-height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
.menu, .close{
cursor: pointer;
display: none;
}
.hello {
display: inline-block;
padding: 10px 10px 15px 15px;
height: 20px;
margin-left: -50px;
}
#media (max-width: 1000px){
ul{
position: fixed;
top:0;
left: -100%;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: white;
z-index: 99;
opacity: 0.97;
transition: 0.5s linear;
margin-left: -20px;
}
.menu, .close{
display: block;
}
.close{
position: relative;
}
ul.toggle{
left: 0;
}
}
`
export const HeaderLogoLink = styled(Link)`
font-size: 2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
padding-left: 30px;
`
export const HeaderNavWrapper = styled.nav`
display: flex;
padding-right: -100px;
ul li a:hover{
color: darkgray;
}
ul li a{
text-decoration: none;
text-transform: uppercase;
color: #555;
padding: 0 15px;
}
ul li{
list-style: none;
display: inline-block;
}
`
// style for home page
export const ProductListWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
flex-wrap: wrap;
`
export const CardWrapper = styled.div`
min-width: 300px;
min-height: 400px;
border: 1px solid #eee;
overflow: hidden;
padding: 10px;
box-shadow: 2px 8px 20px #ddd;
margin: 10px 15px;
transition: 0.5s linear;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
display: block;
`
export const CardInfoWrapper = styled.div`
margin: 10px 15px;
text-decoration: none;
a{
text-decoration: none;
color: #333;
}
a:hover{
color: darkblue;
}
`
export const CardImageWrapper = styled.img`
max-width: 300px;
max-height: 300px;
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 15px;
`
export const CardTextWrapper = styled.div`
padding: 0;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
line-height: 1.5;
margin: -5px 0;
-webkit-font-smoothing: antialiased;
`
export const CardTitleLinkWrapper = styled(Link)`
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
margin-top: -5px;
font-family: 'Segoe UI',serif;
display: inline-block;
-webkit-font-smoothing: antialiased;
`
export const CardDetailLinkWrapper = styled(Link)`
background: #333;
text-align: center;
width: 300px;
margin-left: 10px;
height: 25px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 1em;
color: white;
text-decoration: none;
display: inline-block;
-webkit-font-smoothing: antialiased;
`
// style for detail page
export const ProductDetailWrapper = styled.div`
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 50px 0;
box-sizing: border-box;
`
export const DetailImageWrapper = styled.img`
max-width: 500px;
min-width: 290px;
height: 300px;
display: block;
object-fit: cover;
margin: 25px;
`
export const DetailInfoWrapper = styled.div`
max-width: 500px;
min-width: 290px;
margin: 25px;
`
export const DetailTitleWrapper = styled.div`
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
box-sizing: border-box;
font-family: 'Segoe UI',serif;
letter-spacing: 1px;
`
export const DetailButtonWrapper = styled.button`
background: #333;
color: white;
text-decoration: none;
padding: 10px 35px;
margin-top: 30px;
display: inline-block;
font-family: 'Georgia', sans-serif;
`
export const DetailTextWrapper = styled.div`
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 10px 0;
`
// style for alert box
export const AlertTextWrapper = styled.div`
font-family: '.AppleSystemUIFont', sans-serif;
-webkit-font-smoothing: antialiased;
`
I am not sure, but you may try this...
import styled from 'styled-components';
import { Link } from 'react-router-dom';
// general layout for shopaholic
export const SectionWrapper = styled.section`
box-shadow: 0 0 5px #ccc;
padding: 15px 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
`;
// style for header
export const HeaderWrapper = styled.header`
min-height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
.menu,
.close {
cursor: pointer;
display: none;
}
.hello {
display: inline-block;
padding: 10px 10px 15px 15px;
height: 20px;
margin-left: -50px;
}
#media (max-width: 1000px) {
ul {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: white;
z-index: 99;
opacity: 0.97;
transition: 0.5s linear;
margin-left: -20px;
}
.menu,
.close {
display: block;
}
.close {
position: relative;
}
ul.toggle {
left: 0;
}
}
`;
export const HeaderLogoLink = styled(Link)`
font-size: 2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
padding-left: 30px;
`;
export const HeaderNavWrapper = styled.nav`
display: flex;
padding-right: -100px;
ul li a:hover {
color: darkgray;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #555;
padding: 0 15px;
}
ul li {
list-style: none;
display: inline-block;
}
`;
// style for home page
export const ProductListWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
flex-wrap: wrap;
`;
export const CardWrapper = styled.div`
min-width: 300px;
min-height: 400px;
border: 1px solid #eee;
overflow: hidden;
padding: 10px;
box-shadow: 2px 8px 20px #ddd;
margin: 10px 15px;
transition: 0.5s linear;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
display: block;
`;
export const CardInfoWrapper = styled.div`
margin: 10px 15px;
text-decoration: none;
a {
text-decoration: none;
color: #333;
}
a:hover {
color: darkblue;
}
`;
export const CardImageWrapper = styled.img`
max-width: 300px;
max-height: 300px;
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 15px;
`;
export const CardTextWrapper = styled.div`
padding: 0;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
line-height: 1.5;
margin: -5px 0;
-webkit-font-smoothing: antialiased;
`;
export const CardTitleLinkWrapper = styled(Link)`
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
margin-top: -5px;
font-family: 'Segoe UI', serif;
display: inline-block;
-webkit-font-smoothing: antialiased;
`;
export const CardDetailLinkWrapper = styled(Link)`
background: #333;
text-align: center;
width: 300px;
margin-left: 10px;
height: 25px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 1em;
color: white;
text-decoration: none;
display: inline-block;
-webkit-font-smoothing: antialiased;
`;
// style for detail page
export const ProductDetailWrapper = styled.div`
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 50px 0;
box-sizing: border-box;
`;
export const DetailImageWrapper = styled.img`
max-width: 500px;
min-width: 290px;
height: 300px;
display: block;
object-fit: cover;
margin: 25px;
`;
export const DetailInfoWrapper = styled.div`
max-width: 500px;
min-width: 290px;
margin: 25px;
`;
export const DetailTitleWrapper = styled.div`
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
box-sizing: border-box;
font-family: 'Segoe UI', serif;
letter-spacing: 1px;
`;
export const DetailButtonWrapper = styled.button`
background: #333;
color: white;
text-decoration: none;
padding: 10px 35px;
margin-top: 30px;
display: inline-block;
font-family: 'Georgia', sans-serif;
`;
export const DetailTextWrapper = styled.div`
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 10px 0;
`;
// style for alert box
export const AlertTextWrapper = styled.div`
font-family: '.AppleSystemUIFont', sans-serif;
-webkit-font-smoothing: antialiased;
`;
Im not sure if this work with styled component!! The use of the !important on the style that is being ignored, or overridden in react. In normal css i will do it this way:
.selector{
background-color: red !important;
}
You can try this:
export const DetailButtonWrapper = styled.button`
background: #333 !important ;
`;
Im not certain about this answer but yiu can try it. !important on the style which are not applying
It turns out this problem happens when running the app using
npm start
however, the css issue goes away when doing npm run build and then serve -s build
I guess production wise this is not a bug but rather something wrong with the development environment, in case any one in the future has this problem, one can try build the project and see if the error goes away.