We Keep Coding

Reducing the size of website increases the width

I have YouTube-style header like css, when I reduce the size of my website, the width of my YouTube-style header increases and my icons extend beyond the boundaries of the site, but when trying same thing with https://m.youtube.com/
it does not increase its width no matter how small you make it, any idea on this ?
i dont want to use overflow:hidden; because when website size is reduced then it cuts out my icons, icons should still be visible like in youtube mobile version.
try it here:
https://codesandbox.io/s/material-ui-icon-avatar-example-forked-exzhzj?file=/src/app.css&resolutionWidth=153&resolutionHeight=671
code:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "#material-ui/core/styles";
import Avatar from "#material-ui/core/Avatar";
import NotificationsIcon from "#material-ui/icons/Notifications";
import MenuIcon from "#material-ui/icons/Menu";
import SearchIcon from "#material-ui/icons/Search";
import VideoCallIcon from "#material-ui/icons/VideoCall";
import AppsIcon from "#material-ui/icons/Apps";
import "./app.css";
export default function EmailAvatar() {
return (
<div className="box-container">
<div className="header">
<div className="header__left">
<MenuIcon />
{/* <img
className="header__logo"
src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg"
alt=""
/> */}
</div>
<div className="header__input">
<input placeholder="Search" type="text" />
</div>
<div className="header__icons">
<span title="Create">
<VideoCallIcon className="header__icon" />
</span>
<span>
<AppsIcon className="header__icon" />
</span>
<span title="Notifications">
{" "}
<NotificationsIcon className="header__icon" />
</span>
<Avatar
alt="Remy Sharp"
src="https://www.shutterstock.com/image-photo/skeptic-surprised-cat-thinking-dont-260nw-1905929728.jpg"
/>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<EmailAvatar />, rootElement);
img of problem:
youtube mobile:

overflow hidden add
.header {
overflow: hidden;
}

Your header is inside another container, and has a sticky position
change this for your header class :
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

The CSS for my navigation bar component is no working and instead is taking the CSS of my log in component

I am creating a website that utilizes the Spotify API and I have created a login page where the user can login through Spotify and if they successfully login they are redirected to my home page. I have CSS for the login that puts the login button in the center of the page and when they get redirected to the homepage I am trying to put the navigation bar on top of the page but for some reason, it takes the CSS of the Login component and ignores all the CSS I try to put in for the navigation bar component and I want to know why that is.
my App.js file:
import React, { useState, useEffect} from 'react';
import { Route, Routes } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Login from './components/Login';
import Home from './components/Home';
import NavBar from './components/NavBar';
import Guesser from './components/Guesser';
import Feed from './components/Feed';
import Generator from './components/Generator';
const code = new URLSearchParams(window.location.search).get('code')
const App = () => {
return (
<div className='main-content'>
<Container>
{code ?
<div>
<Routes>
<Route path='/' element={<NavBar />}>
<Route index element={<Home />} />
<Route path='/guesser' element={<Guesser />} />
<Route path='/feed' element={<Feed />} />
<Route path='/generator' element={<Generator />} />
</Route>
</Routes>
</div> :
<Login />}
</Container>
</div>
)
}
export default App
my App.css file:
.main-content{
display: flex;
height: 100vh;
width: 100%;
background-color: black;
color:white;
padding: 0;
}
My Login.js File:
import React from 'react'
import {Button} from 'react-bootstrap';
import "./index.css"
import SpotifyLogo from '../../spotify-logo2.png';
const Login = () => {
const authEndPoint = "https://accounts.spotify.com/authorize";
const clientId = "{My client id}";
const redirectUri = "http://localhost:3000";
const scopes = [
"streaming",
"user-read-email",
"user-read-private",
"user-library-read",
"user-library-modify",
"user-read-playback-state",
"user-modify-playback-state"
];
const AUTH_URL = `${authEndPoint}?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}`;
return(
<div className="main-content">
<div className='spot-img'>
<img src={SpotifyLogo} alt='Spotify Logo'/>
</div>
<Button
href={AUTH_URL}
className='button'
>
login
</Button>
</div>
)
}
export default Login
My Login.css File:
.main-content{
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
position: relative;
}
.spot-img{
position: absolute;
top: 100px;
}
.button{
background-color: green;
width: 100px;
}
My Navbar.js File:
import "./index.css";
import { NavLink, Outlet } from 'react-router-dom';
const NavBar = () => {
return(
<div className='main-content'>
<nav >
<NavLink
exact='true'
activeclassname='active'
to='/'
>
Home
</NavLink> |
<NavLink
exact='true'
activeclassname='active'
to='/guesser'
>
Guesser
</NavLink> |
<NavLink
exact='true'
activeclassname='active'
to='/feed'
>
Feed
</NavLink> |
<NavLink
exact='true'
activeclassname='active'
to='/Generator'
>
Generator
</NavLink> |
</nav>
<Outlet />
</div>
)
}
export default NavBar;
My NavBar.css File:
.nagivation{
position: absolute;
top: 10px;
background-color: gray;
}
All the other component file are simple and only output the name of the webpage and have no CSS filed in yet.
Login image
Home page after successfully logging in

The problem is that you are reusing the same CSS for the logo and the navbar. The parent div of both the logo and the navbar uses the .main-content which centers everything
.main-content{
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
position: relative;
}
I suggest you use different styling for the parent div of your navbar.

How to pass CSS from CSS module as prop in Next.js

I am trying to apply CSS on a component called Cards. I want to apply the CSS on the #image_div div. My code is as follows:
team.module.css:
.grid_container{
display: grid;
grid-template-columns: repeat(3,auto);
}
.image #image_div{
border-radius:100%;
margin: 30vh;
}
index.js:
import Image from "next/image";
import Div from "../../components/Div";
import Cards from "../../components/Cards";
import styles from "../../styles/team.module.css";
import xyz from "../../public/xyz.jpeg"
export default function Team(){
return (
<Div>
<div className={`${styles.grid_container}`}>
<Cards url={xyz} title={"XYZ"} className={styles.image}></Cards>
</div>
</Div>
);
}
Cards.js:
import Image from "next/image";
import { Card } from "react-bootstrap";
import styles from "../styles/components/Card.module.css";
export default function Cards({title,url,width,height,alt,description,className}) {
return (
<Card className={`card col-xs-12 col-sm-4 ${styles.Card} ${className?className:null}`}>
<div className="d-flex justify-content-center" id="image_div">
<Image
variant="top"
src={url}
width={width}
height={height}
alt={alt}
className="img-card"
/>
</div>
<Card.Body className="card-content">
<Card.Title className="card-title text-center">{title}</Card.Title>
<Card.Text className="text-center">{description}</Card.Text>
</Card.Body>
</Card>
);
}
But when I inspected the #image_div the CSS is not applied to it. What am I doing wrong here? I want to apply the CSS defined in the team.module.css without defining the same CSS in the Card.module.css file (which contains CSS for Cards.js).

Just like the class selectors, the #image_div selector also gets namespaced by CSS Modules.
You have to use :global() on the selector to switch to global scope and properly target #image_div.
.image :global(#image_div) {
border-radius:100%;
margin: 30vh;
}

React re-use a component with different style and layout

I'm new to styling in React. I tried CSS modules and styled components but I'm not able to change layout and styles.
The goal is to have a group of buttons to display as flex on the main page and as an inline with different style attributes in another page by re-using the HomeButtons.js component.
HomeButtons.js is the home page and it has a map() function looping through a button called ButtonCategory.js.
HomeButtons.js renders the map() inside a styled using CSS modules file. ButtonCategory is styled with a CSS modules file as well.
HomeButtons.js is then returned inside a in another class Component called CardsCategory.js. It is in this component that I'm trying to change the display and styl... With a styled Component on the I can show a border but the display attribute doesn't works.With CardsCategory.module.css I can't change the display either...
Not sure what to do... How to change the layout of the re-used component and the style of its nested button component ?
Any feedback is welcome!
HomeButtons.js
import React, { Component } from 'react'
import classes from './HomeButtons.module.css';
import ButtonCategory from '../../components/ButtonCategory/ButtonCategory'
class HomeButtons extends Component {
handleClick = (buttonValue) => {
buttonValue = buttonValue.slice(0, 3).toLowerCase();
this.props.history.push("/" + buttonValue);
};
render() {
const allCategoriesButtons = ["Physics", "Chemistry", "Medicine", "Literature", "Peace", "Economics"];
const allCatMap = allCategoriesButtons.map(button =>
< ButtonCategory
key={button.toString()}
value={button}
name={button}
onClick={e => this.handleClick(e.target.value)}
/>
)
return (
<div>
<div className={classes.container__section}>
{allCatMap}
</div >
</div>
)
}
}
export default HomeButtons;
HomeButtons.module.css
.container__section {
display: flex;
flex-flow: row wrap;
margin: auto;
align-items: center;
justify-content: space-around;
}
ButtonCategory
import React from 'react'
import classes from './ButtonCategory.module.css';
function buttonCategory(props) {
return (
<button
className={classes.b}
name={props.name}
onClick={props.onClick}
value={props.value}
>
{props.name}
</button>
)
}
export default buttonCategory;
ButtonCategory.module.css
opacity: 0.5;
color: red;
font-size: 2em;
margin: 10px 20px 10px 20px;
flex: 1 400px;
height: 3em;
}
CardsCategory
import React, { Component } from 'react';
import axios from 'axios';
import classes from './CardsCategory.module.css';
import HomeButtons from "../HomeButtons/HomeButtons"
import styled from 'styled-components';
const StyledDiv = styled.div`
border: 10px solid orange;
//display: inline; //NOT working
`
class Cards extends Component {
render() {
return (
<div>
<StyledDiv>
<HomeButtons className={classes.test}/>
</StyledDiv>
</div>
)
}
}
export default Cards;
CardsCategory.module.css
.test {
display: inline;
}

You can send styles thru the props and in the component set them as your styles ex.
<MyComponent textAlign='center' ...>
in MyComponent component
<div style={{textAlign: this.props.textAlign}}>
...
</div>
or send whole styles as objects ex.
render(){
const stl = {textAlign: 'center',width:'500px'};
return(
<MyComponent wholeStyle={stl}/>
)
}
and in MyComponent
<div style={this.props.wholeStyle}>
...
</div>

They are 3 ways you can style through props
You can pass an entire style object
Eg:
<MappedComponent style={'display':'flex','alignItems':'center'} />
In the mapped component
Function MappedComponent ({style}){
return (
What's popaining !
);
}
You can style by passing in the specific style you want
Eg:
<MappedComponent textAlign={'center'} />
In the mapped component
Function MappedComponent ({textAlign}){
return (
What's popaining !
);
}
The third way you can style is by defining styles in a CSS file and just passing in the class name
Eg:
<MappedComponent className={''flex-button-style'} />
In the mapped component
Function MappedComponent ({className}){
return (
What's popaining !
);
}
Pick what works best for you and stay consistent with it :) .

Template Literals in React for bootstrap and css modules

Hi I want to use bootstrap and css modules together in react but I am having trouble understanding how. I thought I could use template literals to achieve this purpose.
Here is the code below:
Login.tsx
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles.background-color-main} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
This gives me an error in the className, can anyone show me how I am supposed to properly use bootstrap and my own custom css modules together?
My Login.module.css is here:
.background-color-main {
background-color: #87BFFF;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}

The problem here is in property name background-color-main since you have used - casing. you should access the property by LoginStyles["background-color-main"].
Here is the corrected code
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles["background-color-main"]} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
I've update the same working code here codesandbox