Responsive Semantic UI React Grid, Columns, Rows

Question

I'm having trouble making Semantic UI React grid fully responsive, at least respond the way I want for Desktop, Tablet and Mobile.

I have following three components which I am rendering in Grid Columns.

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Grid, Header } from 'semantic-ui-react'
import GetJobs from '../../components/Home/GetJobs';
import PostForm from '../../components/Home/PostForm';
import Feed from '../../components/Home/Feed';
import Articles from '../../components/Home/Articles';
import './home.css'

class Home extends Component {
  render() {
    return(
      <Grid id="home" stackable columns={3}>
        <Grid.Row>
          <Grid.Column>
            <Header>Articles</Header>
            <Articles/>
          </Grid.Column>
          <Grid.Column>
            <Feed/>
          </Grid.Column>
          <Grid.Column>
            <Header>Jobs</Header>
            <GetJobs/>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

export default Home;

The columns stack properly when going from desktop to mobile. It goes from 3 to 1 column. However, at tablet size, the 3 columns are just fitted more tightly instead of having 2 columns on the screen, and 1 being stacked below.

View Component Tablet View of Component

Ideally, I'd like Feed and Jobs to stay on the the screen when going from Desktop to Tablet size, and when going from Tablet to Mobile, have Feed on top, Jobs below, and Articles at the bottom.

Any help is appreciated on how to get this grid to respond like this.

anyone? any guidances is appreciated. Do I have to specify media queries even though I am using a CSS framework? or is there a work around for my site to respond to different devices? — Generaldeep
– Generaldeep, Commented Aug 29, 2017 at 22:46

Oleksandr Fediashov · Accepted Answer · 2017-08-30 06:28:17Z

41

stackable prop collapses columns only on mobile device, for precise control of widths on diffent devices you should use responsive props. You can also try to play with only and reversed. I made an example that shows how to do this.

<Grid>
  <Grid.Column only='computer' computer={5}>
    <Header>Articles</Header>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <Feed/>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <GetJobs/>
  </Grid.Column>
  <Grid.Column only='mobile tablet' mobile={16} tablet={16}>
    <Header>Articles</Header>
  </Grid.Column>
</Grid>

answered Aug 30, 2017 at 6:28

Oleksandr Fediashov

4,3351 gold badge26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Responsive Semantic UI React Grid, Columns, Rows

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related