CODEWITHSUNDEEP
reactjsresponsive-design
Valentine
Valentine

Reputation: 161

How can I make my buttons responsive on different mobile devies?

I am trying to get into React and responsive design and wanted to create my first application using the Grommet library.

My only problem is that the buttons vary in size depending on the screen size. On the iPad pro for example they appear tiny and on smaller devices way too large:

Here is a link to CodeSandbox.

I think that I messed it up with the containers. I can not figure out how to make my buttons responsive so that they doesn´t vary in sizes too much on different devices.

Any help is appreaciated!

UPDATE

A custom theme with breakpoints already exists in the App.js :

import { themeFile} from "./themes/themeFile";

export class App extends Component {
  render() {
    return (
      <Router>
        <Grommet className="App" theme={themeFile}>
          <Provider store={store}>
            <Menubar />
            <Box direction="column" align="center">
              <Switch>
                <Route path="/summaryPage">
                  <PlayerView />
                </Route>
                <Route path="/topic">
                  <Topic />
                </Route>
                <Route path="/">
                  <Home />
                </Route>
              </Switch>
            </Box>
          </Provider>
        </Grommet>
      </Router>
    );
  }
}

export default App;

Breakpoints are already set in in the themeFile.js as follows:

import { deepFreeze } from "grommet/utils";

export const themeFile= deepFreeze({
  name: "themeFile",
  rounding: 8,
  spacing: 28,
  defaultMode: "light",
  global: {
    breakpoints: {
      small: {
        value: 896,
        borderSize: {
          xsmall: "1px",
          small: "2px",
          medium: "4.666666666666667px",
          large: "7px",
          xlarge: "14px"
        },
        edgeSize: {
          none: "0px",
          hair: "1px",
          xxsmall: "2px",
          xsmall: "3.5px",
          small: "7px",
          medium: "14px",
          large: "28px",
          xlarge: "56px"
        },
        size: {
          xxsmall: "28px",
          xsmall: "56px",
          small: "112px",
          medium: "224px",
          large: "448px",
          xlarge: "896px",
          full: "100%"
        }
      }
)};

I updated the link to the CodeSandbox repo.

Upvotes: 0

Views: 1683

Answers (3)

crgavrila
crgavrila

Reputation: 3

Add wrap prop to Box component like:

<Box wrap width="medium" border={{ size: "medium" }} direction="row-responsive">

Upvotes: 0

Shimi
Shimi

Reputation: 1228

Buttons are not the driver of the layout and their layout is controlled by the wrapper layout component, in your case, it is the Box component (line #11) on the codesanbox. The Box component is automatically responsive to the custom breakpoints you have defined and that seems to work as expected.

Now, since the buttons are using the full real estate of the Box, one approach will be to refine the Box layout and put constraints into it. For example, by adding the width prop to the Box, you can limit the max-width of the Layout container and that will impact the stretch of the Buttons, so a simple constraint of width="250px" or width="medium" should constrain the Box, and hence the buttons will have a more conservative layout as follows:

enter image description here

There are more ways to tackle this but a good rule of thumb is to let the layout component drive the layout. One more thing, to limit the minimum & maximum sizes of the Button, you can always set width={{ min: "medium", max: "medium" }} on the Box component and that should do the trick without the involvement of ResponsiveContext, and control the Button sizes to be more consistent across small and wide screens.

If you do want to involve the size prop of ResponsiveContext, you can use the size within the width logic such as width={size==="small" ? "150px" : "250px"} and that should give you more precise width calculation across different screens, but it might be overkill if you can solve the problem with simply using the width constraint.

Upvotes: 0

alekhya VV
alekhya VV

Reputation: 15

if you plan to make the buttons responsive on different devices, you can use @media query. It is simple & you can define the resolution ranges for different devices.

You can find about @media query on the below link. Hope this answer would be helpful for you.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Upvotes: 0

Related Questions