Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtube HomeContent component
import React from 'react';
import './Home.scss';
import {SideBar} from '../SideBar/SideBar';
import {HomeContent} from './HomeContent/HomeContent';
export class Home extends React.Component {
render() {
return (
<React.Fragment>
<SideBar/>
<HomeContent/>
</React.Fragment>
);
}
}
import {VideoGrid} from '../../../components/VideoGrid/VideoGrid';
import React from 'react';
import './HomeContent.scss';
export class HomeContent extends React.Component {
render() {
return (
<div className='home-content'>
<div className="responsive-video-grid-container">
<VideoGrid title='Trending'/>
<VideoGrid title='Autos & Vehicles' hideDivider={true}/>
</div>
</div>
);
}
}
@import '../../../styles/shared.scss';
.home-content {
margin-left: $sidebar-left-width;
display: grid;
grid: auto / auto;
justify-content: center;
}
@media all and (min-width: 476px) {
.responsive-video-grid-container {
max-width: 240px;
}
}
@media all and (min-width: 700px) {
.responsive-video-grid-container {
max-width: 472px;
}
}
@media all and (min-width: 900px) {
.responsive-video-grid-container {
max-width: 667px;
}
}
@media all and (min-width: 1096px) {
.responsive-video-grid-container {
max-width: 864px;
}
}
@media all and (min-width: 1370px) {
.responsive-video-grid-container {
max-width: 1096px;
}
}
@media all and (min-width: 1370px) {
.responsive-video-grid-container {
max-width: 1096px;
}
}
@media all and (min-width: 1560px) {
.responsive-video-grid-container {
max-width: 1284px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.