How to apply media query in Gatsby site? - javascript

Here is my index.js code.
import * as styles from "../styles/home.module.css";
export default function index() {
return (
<section id="#">
<div
className={styles.heading}>
Hello World!
</div>
</section>
}
Here is my CSS file home.module.css
.heading {
color: yellow;
}
#media screen and (max-width:768px) {
.heading{
color: red;
}
}
The original color of the text remains yellow. I don't know why but when I resize the window the color does not change to red. May I know where I am wrong or what is the possible solution?

First of all, you must import react.
import * as React from 'react'
And you are missing close parenthesis ).
I've made some changes and it works well on my end.
import * as React from 'react'
import * as styles from './home.module.css'
const IndexPage = () => (
<section id="#">
<div className={styles.heading}>Hello World!</div>
</section>
)
export default IndexPage
home.module.css
.heading {
color: yellow;
#media screen and (max-width: 768px) {
color: red;
}
}

Related

Using router link on a div in react

Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Little addition, I'm just learning react it's probably not the best solution but it seems to work for me.
Exactly you can use history.push to do everything, for example history.push(path/${id}). Hope you get the idea
---> reply
function TourItem({ currentItems }) {
const [itemId, setItemId] = useState();
useEffect(()=>{
if (itemId) {
history.push(`/tour-detail/${itemId}`);
}
}, [itemId]);
return (
<div className={cx("wrapper")}>
{currentItems && currentItems.map(item => (
<div key={item.id} className={cx("item")} onClick={()=>setItemId(item.id)}>
<div className={cx("inner")}>
<div className={cx("image")}>
<img src={item.images[0]} alt={item.tourName} />
</div>
<div className={cx("meta")}>
<h4 className={cx("tour-name")}>
<Link to={`/tour-detail/${item.id}`}>{item.tourName}</Link>
</h4>
<p>Khởi hành từ: <span>{item.departureFrom}</span></p>
<p>Thời gian: <span>{item.time}</span></p>
<p>Giá từ: <span><FormatPrice>{item.price}</FormatPrice> VNĐ</span></p>
</div>
</div>
</div>
))}
</div>
);
}

How do I separate react js cards?

I want to separate them and line up horizontally and vertically
import React from 'react'
import "./Projects.css";
import { Link } from 'react-router-dom';
function Projects({projectsData}) {
return (
<>
{projectsData.map((index)=>{
const{img,link,title}=index
return(
<div className="_div_">
<div className="cards_">
<div className="_imag">
<img src={img}/>
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
</div>
</div>
)
})}
</>
)
}
export default Projects
._div_{
background-color: #fff;
height: 100vh;
width: 100%;
/* To adjust the height as well */
height: fit-content;
}
._imag{
height: auto;
width: 20%;
background-color: rgb(183, 183, 204);
border-radius: 9px;
}
._imag img{
margin-top:0px;
border-radius: 7px;
}
._writings{
height: 40%;
}
.cards_{
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
import React from 'react'
import BodySection from "../Navbar/BodySection"
import Navbar from "../Navbar/Navbar"
import Content from "../Navbar/Content"
import {Data1,projectsData} from "./Data"
import Projects from "../Navbar/Projects"
function Home() {
return (
<>
<BodySection/>
<Content{...Data1}/>
<Projects projectsData={projectsData}/>
</>
)
}
export default Home
I want to separate the cards and put them horizontally and vertically and not just vertically.
thank you.
Please ignore what I am about to write because it wont let me post this saying I need to add more details but I dont have more details to add.
The top level should be the flex into which you map the cards, something like this:
function Projects({ projectsData }) {
return (
<div className="_div_">
<div className="cards_">
{projectsData.map((index) => {
const { img, link, title } = index;
return (
<div className="_imag">
<img src={img} />
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
);
})}
</div>
</div>
);
}
You should probably have a card element together with these properties on cards_ to position them better:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
This is a perfect use case for css flexbox. I threw together a quick codesandbox for you.
You can use my code as a starting point and expand out to your use case.
If you need a quick intro to flexbox here's a great video.

How to fix position of one element in a flexbox?

I have 2 boxes: Panel and Sidebar, in a flexbox, with flex-direction: row and justify-content: space-between I am able to horizontally align them side by side with a gap in the middle.
Now I'd like to fix the right Sidebar position, i.e. when scrolling down, the Sidebar should always stay on top of the screen, regardless of the location of Panel. How can I do it with CSS?
Working example here: https://codesandbox.io/s/gallant-saha-zgmnw
Code here:
App.js:
import React from "react";
import "./App.scss";
import Panel from "./Panel";
import Sidebar from "./Sidebar";
export default function App() {
return (
<div className="App">
<Panel />
<Sidebar />
</div>
);
}
App.scss:
.App {
width: 1100px;
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
Panel.js:
import React from "react";
import "./Panel.scss";
const Panel = () => {
return (
<>
<div className="panel">The main panel</div>
</>
);
};
export default Panel;
Sidebar.js:
import React from "react";
import "./Sidebar.scss";
const Sidebar = () => {
return (
<>
<div className="sidebar">The sidebar</div>
</>
);
};
export default Sidebar;
I modified your siderbar css.
I used position fixed as this will make the sidebar fixed in the viewport so as you scroll it will remain static.
.sidebar {
position: fixed; /* add this */
width: 200px;
height: 200px;
text-align: center;
border: 1px black solid;
left: 906px /* add this */
}
This produces the desired effect. Tested and works. Apologies, I have updated my answer.
add this css to .sidebar
position:fixed;
right: 10px;
also, you can add:
top: -- px
if you have Navbar.

Prevent Navlink from highlighting on hover

I am trying to have a whole section of a page act as a link to another page, but I don't want the section to be highlighted in blue when the user hovers over it. No matter what I do it highlights on hover.
JS
import { NavLink } from "react-router-dom";
<NavLink to="/application" className="nohighlight">
<h1 className="puppytitle">
Get your own puppy
</h1>
</NavLink>
CSS
I thought using !important was like the nuclear option for css, but even that is not working.
.nohighlight {
text-emphasis: none;
text-decoration: none;
}
.nohightlight:hover {
text-decoration: none !important;
}
Thank you in advance.
Looks like all you needed to do was define the color of the text. Here's an example:
import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import styled from 'styled-components';
export default function App() {
return (
<div>
<h1>Hello CodeSandbox</h1>
<Router>
<StyledNavLink to='www.google.ca'>testing</StyledNavLink>
</Router>
</div>
);
}
const StyledNavLink = styled(NavLink)`
text-emphasis: none;
text-decoration: none;
color: black;
&:hover {
text-emphasis: none;
text-decoration: none;
color: black;
}
`;
CodeSandbox: https://codesandbox.io/s/stack-63925598-navlink-color-gqop8

Place text at the bottom of a div in React

How can I place text at the bottom of a div in plain old React (not React Native)?
In html, you can place text at the bottom of a div by using
vertical-align: text-bottom;
In React Native, it looks like you place text at the bottom of a div by using
textAlignVertical: "bottom",
Is there a simple way to place text at the bottom of a div in plain old React?
The only method I got to work so far is is to use Flexbox.
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Codesandbox
Edit: This is a simplified example. What I really need is a div with items in several different spots, and text on the bottom.
Edit: In both HTML and React, vertical-align: text-bottom; does not move text to the bottom of a div. It only shifts the text down a little bit to the bottom of where the text would normally be. So in both HTML and React, it can be used to shift text down a little for a subscript. But in both HTML and React, it can't be used to shift text way down to the bottom of a div.
You could use margin:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
marginTop: 'auto'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Or align-self:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
alignSelf: 'flex-end'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
I noticed you mentioned the div has lots of other information in a more complicated example. I would highly recommend trying out css grid if you haven't already. It allows you to structure the items on your screen very easily.
Here's an example using grid to create the 'holy grail layout' which is by no means the best example but it shows how easy it is to structure divs in different areas of the screen.
https://codepen.io/frazermg/pen/bXbXOR?editors=1100
.container {
display: grid;
grid-template-areas: 'header header header header'
'left content content right'
'left content content right'
'footer footer footer footer';
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(30vh, auto);
}
.header {
background-color: blue;
grid-area: header;
}
.left {
background-color: green;
grid-area: left;
}
.content {
background-color: #eee;
grid-area: content;
}
.right {
background-color: pink;
grid-area: right;
}
.footer {
background-color: orange;
grid-area: footer;
}
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
Here is an example of nested grids:
https://codepen.io/frazermg/pen/ZgEwVd
This website is very useful for all things css, especially flexbox and grid.
https://css-tricks.com/snippets/css/complete-guide-grid/
I hope this can help you!
What about simply style any span or component with text inside a div like this:
... style={{position:"absolute",bottom:"0px"}} ...

Categories