CODEWITHSUNDEEP
cssreactjs
SImon Haddad
SImon Haddad

Reputation: 842

Syntax problem in media query using styled-components

I have a small issue, I have 2 ranges of media queries not being read and I think I have a syntax wrong somewhere. I will paste some code

const size = {
  mobileS: '320px',
  mobileM: '375px',
  mobileL: '425px',
  ipad: '768px',
  tablet: '1024px',
  laptop: '1024px',
  laptopL: '1330px',
  desktop: '2560px',
};

const device = {
  mobileS: `(max-width:${size.ipad})`,
  ipad: `(min-width: ${size.ipad} and max-width:${size.tablet})`,
  tablet: `(min-width: ${size.tablet} and max-width:${size.laptopL})`,
  desktop: `(min-width: ${size.laptopL})`,
};

export default device;

The ipad and tablet screens are not being read and I think that is due to a syntax error in the way I declared the min and max width for the 2 devices. Please if someone can help

Upvotes: 0

Views: 42

Answers (1)

Dmitry Stepanov
Dmitry Stepanov

Reputation: 366

Try that. Look at the brackets:

ipad: `(min-width: ${size.ipad}) and (max-width:${size.tablet})`,
tablet: `(min-width: ${size.tablet}) and (max-width:${size.laptopL})`,

Upvotes: 2

Related Questions