Handling mobile specific styling

[eric-mathison]

I am trying to figure out a way, any way, to implement the ability to make mobile only style settings (media query stuff).

Using the landing page example as an example here. The container component has margin and padding options that adjust the inline styling of the container. These inline styles override all css classes, etc. So, while this might look fine setting these in a desktop layout, the mobile layout looks off, and you will need some way to adjust the margin/padding for mobile only.

Now, since you can't inline media queries, I can't think of how this can be done.

Other page builders that I've seen will either make a separate css file or add styles to the header of the rendered html file. But I'm not sure if this is possible with Craft.js.

Any help or ideas here would greatly be appreciated.

[eric-mathison]

Ok, I'm pretty sure I figured out how to accomplish this. I ended up using styled-components since you can pass props to the component and it will modify the css on the fly. I was struggling there for a bit because I'm using TailwindCSS for the bulk of the project and you can't use dynamic classes, even with JIT enabled. Plus inline styling just wouldn't work.

So for anyone interested, this is what the container component resulted as. This allows me to pass additional mobile settings to it.

const ContainerDiv = styled.div`
  display: flex;
  width: 100%;
  flex-direction: column;
  margin: ${({ margin }: ContainerProps) =>
    margin
      ? `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`
      : ""};
  padding: ${({ padding }: ContainerProps) =>
    padding
      ? `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`
      : ""};
  background: ${({ background }: ContainerProps) => background};
  @media (max-width: 768px) {
    margin: ${({ tabletMargin }: ContainerProps) =>
      tabletMargin
        ? `${tabletMargin[0]}px ${tabletMargin[1]}px ${tabletMargin[2]}px ${tabletMargin[3]}px`
        : ""};
    padding: ${({ tabletPadding }: ContainerProps) =>
      tabletPadding
        ? `${tabletPadding[0]}px ${tabletPadding[1]}px ${tabletPadding[2]}px ${tabletPadding[3]}px`
        : ""};
  }
  @media (max-width: 640px) {
    margin: ${({ mobileMargin }: ContainerProps) =>
      mobileMargin
        ? `${mobileMargin[0]}px ${mobileMargin[1]}px ${mobileMargin[2]}px ${mobileMargin[3]}px`
        : ""};
    padding: ${({ mobilePadding }: ContainerProps) =>
      mobilePadding
        ? `${mobilePadding[0]}px ${mobilePadding[1]}px ${mobilePadding[2]}px ${mobilePadding[3]}px`
        : ""};
  }
`

[hananint]

Thank you for sharing