-
Notifications
You must be signed in to change notification settings - Fork 115
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Frida & Axel #65
base: main
Are you sure you want to change the base?
Frida & Axel #65
Conversation
Co-authored-by: AHPIXI <[email protected]>
…plus release date
Co-authored-by: AHPIXI <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The site looks good and works well! Extra plus for no scrolling on the movie-info-page :)
<> | ||
<BrowserRouter> | ||
<main> | ||
<div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why an extra div, when "main" is there to wrap the content?
<h1 className="title">{movie.title}</h1> | ||
<h4 className="release-date">Released {movie.release_date}</h4> | ||
</div> | ||
<Link key={movie.id} to={`/movie/${movie.id}`}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is a key needed here, when there is one in the "movie-box"-div?
import { useEffect, useState } from "react"; | ||
import "./Home.css"; | ||
|
||
export const Home = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is an export both here and a default export in the end. Only one is needed.
@media (min-width: 500px) AND (max-width: 699px) { | ||
.movie-boxes { | ||
grid-template-columns: 1fr 1fr; | ||
} | ||
} | ||
|
||
@media (min-width: 700px) AND (max-width: 999px) { | ||
.movie-boxes { | ||
grid-template-columns: 1fr 1fr 1fr; | ||
} | ||
} | ||
|
||
@media (min-width: 1000px) { | ||
.movie-boxes { | ||
grid-template-columns: 1fr 1fr 1fr 1fr; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good that there's control of how many movies are shown and that the margin/gap (which is 0) is kept consistent.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well structured and well-styled ⭐ Good job!
} | ||
|
||
.movie-info-box { | ||
position: fixed; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You probably meant position: absolute;
here? You can't scroll to see all the text in mobile
Netlify link
https://newmoviereleases.netlify.app/
Collaborators
[AHPIXI]