Skip to content

Instantly share code, notes, and snippets.

@drenther drenther/UserProfile.js
Last active Jun 25, 2018

Embed
What would you like to do?
Media queries in styled-components
/* src/components/UserProfile.js */
.
.
.
/* line 44 */
const breakPoint = '600px';
.
.
.
/* line 53 - 65 */
const Details = styled.div`
width: 350px;
height: 200px;
display: row;
margin: 10px;
jusify-content: center;
align-items: flex-start;
color: black;
@media (max-width: ${breakPoint}) {
width: 280px;
}
`;
.
.
.
/* line 85 - 99 */
export default styled(UserProfile)`
padding: 10px;
margin: 40px 0;
display: flex;
position: relative;
background: ${getColor('secondary')};
border-radius: 5px;
box-sizing: border-box;
@media (max-width: ${breakPoint}) {
flex-direction: column;
justify-content: center;
align-items: center;
}
`;
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.