media queries not working properly in a react app - reactjs

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?

Related

How do I jump one section when I am scrolling down in React?

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);
}
}

What about this .css file is making my Rails/React app fail to build using Heroku?

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!

Sidebar elements pushed outside the sidebar when padding added

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;
}

Background image in Next.JS using SASS

I've been trying to get this background image into a project but it never shows. No errors indicating there's a problem. I'm using Next.JS and all the other images through out the project load fine. To test I changed the color of the background and it worked fine.
My SASS file looks like:
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#900&display=swap");
$primary-color: #24b4a8;
$secondary-color: #b3b5b5;
$background-color: #2d2f31;
$third-color: #222426;
$main-font: Montserrat;
$secondary-font: Raleway;
body {
width: 100%;
overflow-x: hidden;
margin: 0;
a {
text-decoration: none;
}
}
html .container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
}
section {
padding: 7em;
width: calc(100% - 4em);
height: calc(100vh - 14em);
scroll-snap-align: center;
&:nth-of-type(1) {
background-image: url("/public/background.svg");
display: grid;
grid-template-columns: repeat(6, 15%);
grid-template-rows: repeat(6, 15%);
.intro {
display: flex;
flex-direction: column;
align-items: center;
grid-column-start: 1;
grid-column-end: 4;
padding-top: 3em;
h2 {
font-size: 2em;
font-family: "Courier New", Courier, monospace;
color: $secondary-color;
}
h3 {
font-size: 2.75em;
color: $secondary-color;
font-family: "Montserrat", sans-serif;
font-weight: 900;
}
}
h1 {
font-family: "Montserrat", sans-serif;
font-weight: 900;
grid-column-start: 1;
grid-row-start: 3;
font-size: 20.25em;
width: 100%;
margin-left: -50%;
padding-top: 17%;
}
.profile {
display: flex;
flex-direction: column;
grid-column-start: 5;
grid-row-start: 2;
button {
color: $primary-color;
}
img {
size: 2em;
}
}
}
&:nth-of-type(2) {
background: $secondary-color;
.test-title {
font-family: "Montserrat", sans-serif;
font-weight: 900;
font-size: 3em;
margin: 90px auto;
}
.quotes {
display: flex;
flex-direction: column;
align-items: center;
margin: 90px auto;
max-width: 700px;
p {
text-align: center;
margin-bottom: 20px;
color: #45454d;
font-size: 50em;
margin-top: 25px;
font-size: 2em;
}
blockquote {
font-size: 1.75em;
font-family: "raleway", sans-serif;
font-weight: 900;
color: $primary-color;
}
}
.quote {
display: flex;
span {
height: 20px;
width: 20px;
margin: 30 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
span::before {
content: "";
height: 6px;
width: 6px;
background-color: #d4d4d4;
border-radius: 50%;
transition: background-color 0.3s ease;
}
span:hover::before {
background-color: #45454d;
}
span[data-quote="${active}"]::before {
background-color: #45454d;
}
}
blockquote::before {
content: "\201c";
font-size: 4em;
display: block;
margin-bottom: -40px;
margin-top: -40px;
}
}
&:nth-of-type(3) {
background: $background-color;
}
}
My next.config.js file looks like:
const withImages = require('next-images')
const withSass = require('#zeit/next-sass')
module.exports = withSass(withImages({
webpack (config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
})
return config
}
}))
I've tried using background: URL("background.svg"); background: url("background.png"); background: url(/public/background.png); none of these return the image or an error.
Any help is greatly appreciated, and thanks in advance!

make grid layout divs to be the same height

I am trying to make my grid layout divs to be the same height. Please see my sass code below, screenshots of website layout and html code. I want the common height to be the height of the grid element with the most content.
I am only able to provide a picture of my html, since I am using react and different elements.
Please advise on SASS settings. thanks!
SASS code:
// MAIN CONTENT
.grid {
display: grid;
width: 114rem;
grid-gap: 0.5rem;
margin:1rem;
grid-template-columns: repeat(
auto-fit,
minmax(20rem, 1fr)
);
align-items: start;
#include media(small) {
grid-gap: 3rem;
}
&__item {
background: $mainWhite;
border-radius: 0.05rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, .05);
transition: $transition;
margin-bottom: 2rem;
&:hover {
transform: translateY(-.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, .1);
}
}
}
.card {
.card__img {
display: block;
width: 100%;
height: 18rem;
object-fit: cover;
object-position: top;
}
.card__content {
padding: 2rem 2rem;
a{
margin-bottom: 1%;
&:hover{
text-decoration: none;
}
}
.card__tools__header{
font-weight: 400;
margin-bottom: 0.2rem;
font-size: 1.2rem;
color:$mainBlack;
}
.card__tools__box{
display:flex;
flex-wrap: wrap;
flex-direction: row;
box-sizing: border-box;
.card__tools {
font-size: 1.5rem;
white-space: nowrap;
color:$mainGreen;
padding-right:1rem;
overflow: hidden;
box-sizing: border-box;
}
}
.card__header {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-weight: 500;
color: $mainBlack;
margin-bottom: 1rem;
}
.card__text {
font-size: 1.1rem;
letter-spacing: .1rem;
margin-bottom: 1rem;
}
}
.card__btn {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
text-align: center;
color: $mainBlack;
background-color: $mainWhite;
border: none;
border-radius: 0;
transition: $transition;
cursor: pointer;
margin-top: 5%;
span {
margin-left: 1rem;
}
&:hover,
&:active {
background: $mainGreen;
text-decoration: none;
color:$mainWhite;
span {
margin-left: 1.5rem;
}
}
}
}
You need to set the height with grid-template-rows on your container and tell the children to fill 100% of that height. Otherwise they will only take the space they need:
.grid {
//...
grid-template-rows: 1fr;
&__item {
//...
height: 100%;
}
}
I created a codepen for you to test this.

Resources