Responsive styles

[bkrall]

I'm curious about the recommended way to show different styles for different screen sizes.

i.e., I have a two column layout for tablet and up, but for mobile, I'd like for my grid to stack to one column. Is that currently possible is should I just hide/show my content for responsive?

[wadackel]

Hi @bkrall. Thanks for Issues 😃

There is no plan to add column changes due to response as a function.

Instead, how about using react-sizeme as the parent component and changing the column by its width?

Example idea:

import React, { Component } from 'react';
import sizeMe from 'react-sizeme';
import StackGrid from 'react-stack-grid';

class YourComponent extends Component {
  render() {
    const { width } = this.props;

    return (
      <StackGrid
        // more...
        columnWidth={width <= 768 ? '100%' : '33.33%'}
      >
        // Grid items...
      </StackGrid>
    );
  }
}

export default sizeMe()(YourComponent);

[bkrall]

This is a good solution, thanks!

[wadackel]

@bkrall You're welcome ! I am hoping that you will succeed ! 😃

[danielstaleiny]

You should write about this solution and how to go on different layouts based on screen size in readme.

[wadackel]

Hi @danielstaleiny, Sorry late...

Added to the document ✋
https://github.com/tsuyoshiwada/react-stack-grid#responsive-layout

[iammatthias]

@tsuyoshiwada can the responsive documentation be expanded on? Based on this thread, I assume that this code should display 3 columns on desktop, and 1 column on mobile?

columnWidth={width <= 768 ? '100%' : '33.33%'}

When I use that, it stays at 3 columns across all devices. I took a look at the documentation for "react-sizeme", but didn't come across a solution for this.

[danielstaleiny]

@iammatthias
Make sure that you are listening on width and that width has value.

[iammatthias]

@danielstaleiny as far as I can tell, I am. I can see the width value change in the console when I reaize the window.

My code is here: https://github.com/iammatthias/net/blob/master/src/templates/post.js

Does anything stand out? I’m fairly new to React, so any help would be appreciated.

[danielstaleiny]

Hey I can see that you are parsing width from data.contetnfullgalery but size me gives you size obj in this.props that means that you have to take with from this.props.size.width so change this line
const { title, createdAt, featuredImage, content, blurb, images, width } = this.props.data.contentfulGallery
to:
const { title, createdAt, featuredImage, content, blurb, images } = this.props.data.contentfulGallery
const {width} = this.props.size

next time console log variables you create and make sure that they have values.

[iammatthias]

That worked perfectly, thank you!

I thought I was calling it in the right place before, because I could see a width value changing in the Console. Really appreciate you pointing me in the right direction!