Skip to content

Instantly share code, notes, and snippets.

@csorlandi csorlandi/Footer.js
Created May 31, 2019

Embed
What would you like to do?
import styled from 'styled-components';
export const Container = styled.div`
width: 100%;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
`;
export const Row = styled.div`
width: 100%;
height: auto;
&:before,
&:after {
content: '';
display: table;
}
&:after {
clear: both;
}
`;
function getWidthGrid(value) {
if (!value) return;
const width = (value / 12) * 100;
return `width: ${width}%`;
}
export const Column = styled.div`
float: left;
padding: 0.25rem;
min-height: 1px;
box-sizing: border-box;
@media only screen and (max-width: 768px) {
${({ mobile }) => mobile && getWidthGrid(mobile)}
}
@media only screen and (min-width: 768px) {
${({ tablet }) => tablet && getWidthGrid(tablet)}
}
@media only screen and (min-width: 1000px) {
${({ desktop }) => desktop && getWidthGrid(desktop)}
}
`;
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.